jQuery автозаполнение пользовательского интерфейса - я бы хотел, чтобы начать поиск на фокусе без необходимости вводить что-либо пользователю

Question

Интерфейс автозаполнения jQuery - я бы хотел начать поиск "onfocus" и сразу же показать список вариантов, когда пользователь вкладывает или щелкает в поле поиска без необходимости вводить что-либо.

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

$( "#contact" ).autocomplete({
    source: 'remote.php',
    minLength: 0
});

спасибо!

Answer 1

Немного сложнее, чем ответ Эммета, но ...

• Всплывающий список в фокусе, даже если поле уже содержит текст
• Предотвращает повторное появление списка после нажатия на элемент

Вот оно:

var closing = false;

$('#contact').autocomplete({
    source: 'remote.php',
    minLength: 0,
    close: function()
    {
        // avoid double-pop-up issue
        closing = true;
        setTimeout(function() { closing = false; }, 300);
    }
})
.focus(function() {
    if (!closing)
        $(this).autocomplete("search");
});

Answer 2

Я обнаружил, что этот код немного чище и специфичен для каждого элемента.

 $(<selector>).autocomplete({
            minLength: 0,
            delay: 500,
            source: funcDataLookUp,
            open: function() { $(this).attr('state', 'open'); },
            close: function () { $(this).attr('state', 'closed'); }
        }).focus(function () {
            if ($(this).attr('state') != 'open') {
                $(this).autocomplete("search");
            }
        });

Answer 3

Попробуйте связать focus с автозаполнением.

$("#contact").autocomplete({
        source: 'remote.php',
        minLength: 0
    }).bind('focus', function () {
        $(this).autocomplete("search");
    });

Проверьте мой образец JSFiddle .

Answer 4

Это решение точно не сработало для меня, потому что окно результатов автозаполнения снова всплыло бы после выбора желаемого результата. Это произошло потому, что метод .focus был выполнен до события close:.

Кроме того, согласно коду в , который отвечает , после закрытия коробки он не откроется обратно, потому что переменная closing осталась true из-за выполнения close: после .focus.

Следующий код решил эти две проблемы (обратите внимание, что для переменной closing в событии close: установлено значение false):

var closing = false;

$(function() {$(".autocomplete").autocomplete({
    source: 'remote.php',
    minLength: 0,
    open: function(){
        closing=true; },
    close: function(){
        closing = false;
        }
})
    .focus(function(){
        if ((!closing) && ($(this).val() !== "")){
            $(this).autocomplete("search");
        }
    });
})

Answer 5

это решение не работает для меня, но это:

$('#contact').autocomplete({
source: 'remote.php',
minLength: 0
           }).focus(function(){
if (this.value == "")
$(this).trigger('keydown.autocomplete');
});

хорошо работает (источник: jquery forum )

Answer 6

$("#contact").focus(function() {
    if ($(this).val().length == 0) {
        $(this).autocomplete("search");
    }
});

Убедитесь, что minLength вашего автозаполнения равно 0.

Answer 7

JQUERY фактически предлагает этот метод

http://api.jqueryui.com/autocomplete/#method-search

$('.yourclass').autocomplete({
   minLength: 0
   ,source:['blah','andblahagain']
   ,focus: function() {
     $(this).autocomplete("search", "");
   },
});

В основном вы используете minLength: 0 и событие фокуса с поиском "".