удалить spinner из jquery ui autocomplete, если ничего не найдено

Question

Я хочу удалить счетчик (изображение, которое показывает, что он загружается) из текстового поля, которое поддерживает jquery ui autocomplete. Как нет события «нет результатов, возвращаемых источником», не может вызвать это.

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

Answer 1

Взято из моего ответа here, добавьте следующий код для выполнения после завершения поиска (даже при 0 результатов):

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

Этот код будет инициировать событие (autocompletesearchcomplete), которые затем можно связать с :

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

Надеюсь, что это поможет.

Answer 2

Вы можете отредактировать CSS и удалить счетчик.

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

Answer 3

Это известное открытое расширение для будущих версий JQuery UI ...

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

будет ждать и/или использовать обходной путь (например, посылая специальный ответ от сервера и справиться с этим случай в открытом событии).

Answer 4

Если вы застряли в старой версии jQuery ui, правильным ответом является использование класса ui-autocomplete-loading, который добавляется и удаляется, когда запрос/ответ находится в полете.

Answer 5

По JQuery UI v1.9 вы можете сделать что-то вроде следующего:

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