Показать счетчик с автозаполнением jQuery-ui

Question

Я искал повсюду и просто не вижу, чтобы кто-нибудь делал это - возможно ли иметь какой-нибудь спиннер / загрузчик с автозаполнением пользовательского интерфейса jQuery? (1.8) во время выборки данных?

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

Отличная js-версия блесны: http://fgnass.github.com/spin.js/

Answer 4

CSS Solution

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

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

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

Answer 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;

}