How to display loading icon when autocomplete search is performed?

Question

I need to display that in the separate div (so .ui-autocomplete-loading is not applicable here). I can start to show that when search event is happened. But how can I understand when it should be hidden?

Answer 1

I'm assuming you're using a remote data source. If so, use $.ajax inside of a function you supply to the source parameter. For example:

$("#auto").autocomplete({
    source: function(request, response) {
        $("#loading").show(); // Where #loading is the loading indicator

        $.ajax({
            url: "Your_URL_HERE",
            data: request.term,
            success: function(data) {
                response(data);
                $("#loading").hide();
            },
            error: function() {
                $("#loading").hide();
            }
        });
    }
});

Working Example: http://jsfiddle.net/gKFJU/

Answer 2

CSS Solution

If the loading element is a sibling of the input control then CSS general sibling selector can be used:

.loading {
    /* whatever */
}
#autocomplete.ui-autocomplete-loading ~ .loading {
    background-image: url(loading.gif);
}

Working example

jQuery Solution

You can add the search and response event handlers.

$("#autocomplete").autocomplete({
    delay: 500,
    minLength: 3,
    source: "/search.json",
    search: function () {
        $("#loading2").show();
    },
    response: function () {
        $("#loading2").hide();
    }
});

Note that this approach suffers from race conditions since (i) AJAX requests do not necessarily finish in the order they were started (ii) autocomplete may fire fewer response events than search.

Combined demo here