Дисплей Spinner с jQuery-ui autocomplete

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

источник

2010-03-25 Ciel

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

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

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

источник

2010-03-25 21:37:36 woolyninja

и как примечание стороны - отличное место для прядильщиков = http: //www.ajaxload.info/ – woolyninja

Проблема с этим решением заключается в том, что прядильщик не скрыт, если ответ содержит нулевые результаты, потому что открытое событие не генерируется в этом случае. Элемент управления должен действительно иметь событие с запросом на поиск, которое должно быть вызвано независимо от количества результатов. Вики-страница планирования http://wiki.jqueryui.com/w/page/12137709/Autocomplete ссылается на такое событие, называемое «ответ», но, похоже, оно еще не реализовано. – stefann

Уверенно jQuery UI 1.9 включает исправление для этой проблемы http://bugs.jqueryui.com/ticket/6777 – stefann

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

источник

2011-08-25 09:26:00 Erik

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

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

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

источник

2011-10-23 01:34:06 stefann

Я пробовал это, и он работал ALMOST. Он меняет весь фон на счетчик, что не очень хорошо, когда фон отличается от другого (например, белый текстовый блок на синем фоне). Я использовал следующее: .ui-autocomplete-loading { background-image: url ('/ Контент/Изображения/ui-anim_basic_16x16.gif'); background-repeat: no-repeat; background-position: правый центр; } – Losbear

CSS Решение

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

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

Working example
Alternate (jQuery) solution

источник

2014-02-01 18:22:21

-2

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; 

}

источник

2014-02-20 10:15:06 dmukherjee

ответ

Смежные вопросы