Как сделать так, чтобы список автозаполнения jQuery отображал все опции на фокусе и скрывал после выбора опции? - PullRequest
Новая
       11

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

4 голосов
/ 21 ноября 2011

У меня есть форма с автозаполнением, которая запускает поиск «onfocus» и показывает список опций, когда пользователь нажимает на поле поиска, даже если они ничего не вводят.

Проблема заключается в автозаполнениитребует, чтобы опция была выбрана либо с клавиатуры (стрелка вниз, затем табуляция / возврат или двойной щелчок).Моей первой мыслью было, что один щелчок приводит к тому, что фокус остается в поле поиска, и, таким образом, автозаполнение остается видимым.Тем не менее, поле поиска остается сфокусированным после второго щелчка, но автозаполнение исчезает после второго щелчка.

Любые идеи? 

<script>
$(document).ready(function() {

    var autocomplete_focus = function(){           
        if ($(this).val().length == 0) {
            $(this).autocomplete("search", "%");
        }
    }   

    $( ".autocomplete" ).autocomplete({
            source: "../../db/autocomplete_list.php",
            minLength: 0
    });

    $( ".autocomplete" ).focus(autocomplete_focus);

});
</script>

Я понимаю аналогичный вопрос был опубликован здесь раньше;Однако предложенные решения не работают для меня.

Ответы [ 3 ]

5 голосов
/ 21 ноября 2011

Не уверен, что это приемлемое решение, но один из способов сделать это - заполнить input целевым значением.Это не позволяет меню отображаться дважды: 

/* snip: */
focus: function (event, ui) {
    this.value = ui.item.value;
},

Вот пример: http://jsfiddle.net/wxQf7/

Попробуйте удалить обработчик события focus, чтобы увидеть симптом ввопрос.

2 голосов
/ 21 ноября 2011

Этот метод: 

$( ".autocomplete" ).autocomplete({
        source: "../../db/autocomplete_list.php",
        minLength: 0
}).focus(function(){            
        $(this).trigger('keydown.autocomplete');
});

работает для меня.

Источник:

Отображение списка автозаполнения jquery ui для события фокуса

0 голосов
/ 04 сентября 2012

Попробуй это. Этот фрагмент кода фактически удаляет keydown.autocomplete, в котором есть проблемы. Вместо этого он ищет каждый раз, когда вы сосредотачиваетесь на текстовом поле. 

$( ".autocomplete" ).autocomplete({
    source: "../../db/autocomplete_list.php",
    minLength: 0
}).focus(function(){ 
    $(this).data("autocomplete").search($(this).val());
}

Однако, если вы хотите, чтобы раскрывающийся список исчезал при выборе записи, добавьте эту строку 

$( ".autocomplete" ).autocomplete({
    source: "../../db/autocomplete_list.php",
    minLength: 0
}).focus(function(){

    **if ($(this).autocomplete("widget").is(":visible"))
       return;**
    $(this).data("autocomplete").search($(this).val());
}

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

...