eliminar spinner de jquery ui autocompletar si no se encuentra nada

Question

Quiero eliminar el spinner (imagen que muestra que se está cargando) desde el campo de texto que admite jquery ui autocompletar. Como no hay ningún evento para "no hay resultados devueltos por la fuente", no se puede activar esto.

$("#q").autocomplete({ 
    source: "${createLink(mapping:'qsearch')}", 
    minLength: 2, 
    select: function(event, ui) { 
     foo(ui.item.id); 
    }, 
    search: function(event, ui) { 
     bla(); 
    } 
}); 

Answer 1

Adaptado de mi respuesta here, agregue el siguiente código para ejecutar después de una búsqueda es completa (incluso con 0 resultados):

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

Ese código se disparará un evento (autocompletesearchcomplete), que luego se puede enlazar a :

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

Espero que ayude.

Answer 2

Puede editar el CSS y quitar la ruleta.

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

Answer 3

Esta es una mejora abierto conocido para futuras versiones de jQuery UI ...

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

Habrá que esperar y/o utilizar una solución alternativa (como el envío de una respuesta especial por parte del servidor y manejar esto caso en el evento abierto).

Answer 4

Si está atascado en una versión anterior de jQuery ui, la respuesta correcta es usar la clase ui-autocomplete-loading, que se agrega y elimina mientras la solicitud/respuesta está en vuelo.

Answer 5

A partir de jQuery UI v1.9 se puede hacer algo como lo siguiente:

$("#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(); 
    } 
});