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/