jQuery автозаполнение: как показать анимированный gif загрузки изображения

Я использую jQuery автозаполнение плагин в сочетании с ajax. Вы знаете, как я могу показать индикатор прогресса при выполнении поиска ajax?

Это мой текущий код.

<script type="text/javascript">
    $("#autocomplete-textbox").autocomplete('http://www.example.com/AutoComplete/FindUsers');
</script>

<div>
    <input type="text" id="autocomplete-textbox" />
    <span class="autocomplete-animation"><img id="ajaxanimation" src="../img/indicator.gif")"/></span>
</div>

URL-адрес FindUsers возвращает список пользователей в содержимом.

3 54
jquery jquery-ui-sortable autocomplete jquery-plugins jquery-autocomplete

3 ответа:

автозаполнение добавляет ui-autocomplete-loading класс (на время загрузки), который может быть использован для этого...

.ui-autocomplete-loading { background:url('img/indicator.gif') no-repeat right center }
151
$("#autocomplete-textbox").autocomplete
(
search  : function(){$(this).addClass('working');},
open    : function(){$(this).removeClass('working');}
)

где CSS класс работы определяется следующим образом:

.working{background:url('../img/indicator.gif') no-repeat right center;}

EDIT

Сэм ответ это лучший подход для решения проблемы

47

если никаких результатов не работает, вы можете сделать это:

$("input[name='search']").autocomplete({
...,
select: function( event, ui ) {
action show image
}   
}).data( "autocomplete" )._renderItem = function( ul, item ) {
action hide image
}
1