Отображать прядильщик с автозаполнением jQuery-ui

Ответ 1

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

Затем используйте опцию поиска, чтобы показать счетчик и открыть, чтобы скрыть его:

v1.8 и ниже

$( ".selector" ).autocomplete({
   search: function(event, ui) { 
       $('.spinner').show();
   },
   open: function(event, ui) {
       $('.spinner').hide();
   }
});

v1.9 и вверх

$( ".selector" ).autocomplete({
   search: function(event, ui) { 
       $('.spinner').show();
   },
   response: function(event, ui) {
       $('.spinner').hide();
   }
});

Ответ 2

Моим решением было использовать CSS-класс загрузки .ui-autocomplete-loading, который добавляется и удаляется во входном элементе, когда выполняется запрос AJAX GET:

input[type='text'].ui-autocomplete-loading {
    background: url('/icons/loading.gif') no-repeat right center;
}

Предоставлено это не очень гибкое решение, так как вы не можете отображать счетчик вне элемента ввода, но в моем случае это именно тот UX, который я искал.

Ответ 3

Большая js-версия счетчика: http://fgnass.github.com/spin.js/

Ответ 4

Решение CSS

Если элемент загрузки является дочерним элементом входного элемента управления, тогда может использоваться общий комбинированный сиб. (~) CSS:

.loading {
    /* whatever */
}
#autocomplete.ui-autocomplete-loading ~ .loading {
    background-image: url(loading.gif);
}

Рабочий пример
Альтернативное (jQuery) решение

Ответ 5

input[type='text'].ui-autocomplete-loading {

background:  url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif')          no-repeat
 right center;

}