remove spinner from jquery ui autocomplete if nothing found

Question

I want to remove the spinner (picture which shows that it is loading) from the textfield which supports jquery ui autocomplete. As there is no event for \"no results returne

Answer 1

Adapted from my answer here, add the following code to execute after a search is complete (even with 0 results):

var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
    __response.apply(this, [content]);
    this.element.trigger("autocompletesearchcomplete", [content]);
};

That code will trigger an event (autocompletesearchcomplete) that you can then bind to:

$("#q").bind("autocompletesearchcomplete", function(event, contents) {
    /* Remove spinner here */
});

Hope that helps.

Answer 2

This is a known open enhancement for future versions of jQuery UI...

http://bugs.jqueryui.com/ticket/6777

Will have to wait and/or use a workaround (like sending a special response from the server and handle this case in the open event).

Answer 3

You can edit the CSS and remove the spinner.

$("object_that_has_the_spinner").removeClass( "ui-autocomplete-loading" );

Answer 4

If you're stuck on an older version of jQuery ui, the right answer is to use the class ui-autocomplete-loading, which gets added and removed while the request/response is in flight.

Answer 5

As of jQuery UI v1.9 you can do something like the following:

$( "#q" ).autocomplete({
  source: "${createLink(mapping:'qsearch')}",
  select: function( event, ui ) {
    foo( ui.item.id );
  },
  search: function( event, ui ) {
    $( "#spinner" ).show();
  },
  response: function( event, ui ) {
    $( "#spinner" ).hide();
  }
});