Каков наилучший способ скрыть автозаполнение jQuery UI, если поле ввода не используется? - PullRequest
Новая
       6

Каков наилучший способ скрыть автозаполнение jQuery UI, если поле ввода не используется?

2 голосов
/ 10 февраля 2012

Я успешно прикрепил автозаполнение к тегу span с помощью обработчика событий клика через 

$('#myspan').click(function() {
 var target = $('#myvalue');
 $(this).autocomplete({
                minLength:0,                
                source: ['Apple','Banana','Strawberry'],
                select: function(event, ui) {
                    target.html(ui.item.value);
                }
            });
 $(this).autocomplete("search","");   
});​

Проблема в том, что поле ввода отсутствует, событие blur () не возникает и автозаполнение остается на экране, если пользователь щелкает за пределами селектора. Чтобы увидеть эффект, последовательно нажмите «Выбрать первый», затем «Выбрать второй», фактически не выбирая элемент: http://jsfiddle.net/gtcZb/

Ответы [ 2 ]

4 голосов
/ 10 февраля 2012

Не могли бы вы просто сфокусировать свой диапазон? Добавление атрибута tabindex к нему сделает его фокусируемым (если вы не хотите, чтобы он получал фокус через Tab и Shift + Tab, используйте "-1" в качестве значения).

Я не смог запустить ваш пример (jsFiddle, кажется, не в сети), но я попытался воспроизвести его и заставил работать - в основном:

HTML 

<span id="myspan" tabindex="-1">abcd</span>
<span id="myvalue"></span>

JavaScript 

 $('#myspan').click(function() {
     var target = $('#myvalue');
     $(this).autocomplete({
                    minLength:0,                
                    source: ['Apple','Banana','Strawberry'],
                    select: function(event, ui) {
                        target.html(ui.item.value);
                    }
                })
     $(this).autocomplete("search","").focus();
 }).blur(function() {
     var $this = $(this);
     setTimeout(function() { $this.autocomplete("close") },0);
 });​

Это не идеально - иногда автозаполнение не исчезает, даже если диапазон теряет фокус, и я не мог понять, почему. Но это начало ...

Редактировать: я забыл закрытие setTimeout ... Теперь оно должно работать для всех случаев.

1 голос
/ 10 февраля 2012

Другое решение, которое я только что придумал ... может быть, кто-то не сможет использовать tabIndex (см. Ответ @mgibsonbr), хотя blur () немного лучше: 

$('#myspan').click(function() {
     $(this).autocomplete({
                    ...same as in question...
                })
     $(this).autocomplete("search","").focus();
     //ensure autocomplete hides when user clicks somewhere else:
     var _self = $(this);
     setTimeout(function() { $('body').one("click",function(e) {
                                _self.autocomplete("close");
                });
     }, 0);
 });​
...