Question

Context

• I use jQuery UI autocomplete with a remote datasource.
• The source send data in this format: [{'label':'Bob', 'id':'03362548'}, {...}].
• I display a loader gif when the search begin.
• Data filtering is done serverside.
• I want to hide the loader gif if no results (the server send []).

Question

How to detect if the search has no results for hiding the loader gif?

Code

jquery:

$('#redir-output').autocomplete({
    source: 'php/ajax/autocomplete.php',
    search: function(event, ui) {
        $('#redir-loader').show();
    },
    open: function(event, ui) {
        $('#redir-loader').hide();
    },
    select: function(event, ui) {
        $(this).attr('name', ui.item.id);
    }
});

Answer 1

By default, when the plugin displays the results, it checks if there’s data to show. In the case there isn’t, it closes the menu.

_response: function(content) {
    if (!this.options.disabled && content && content.length) {
        ...
    } else {
        // it closes the menu when content.length == 0 (no data)
        this.close();
    }​

Closing the menu raises the “close” event, so I though you could use it. However, the close event is only triggered when the menu is visible:

close: function(event) {
    clearTimeout(this.closing);
    // as the menu might not be visible at that moment, this is reliable
    if (this.menu.element.is(":visible")) {
        ...
        this._trigger("close", event);
    }
}​

I think you will have to use the source as a callback and implement yourself the ajax request. Using the “complete” callback, you can hide the loading icon, which in any case should be hidden when the request is over, data returned or not:

$('#redir-output').autocomplete({
    source: function(request, response) {

        $.ajax({
            url: 'php/ajax/autocomplete.php',
            data: request,
            dataType: "json",
            success: function(data, status) {
                response(data);
            },
            error: function() {
                response([]);
            },
            complete: function() {
                $('#redir-loader').hide();
            }
        });

    },

    ,
    search: function(event, ui) {
        $('#redir-loader').show();
    },
    open: function(event, ui) {
        $('#redir-loader').hide();
    },
    select: function(event, ui) {
        $(this).attr('name', ui.item.id);
    }
});?