JQuery UI autocomplete - Скрыть список после нажатия Enter

Question

У меня есть вход.Я использую автозаполнение пользовательского интерфейса Jquery, чтобы предложить предложения пользователю.Давайте представим, что у меня в списке 3 элемента: item1, item2, item3.То, что я ищу, - это список, который должен быть закрыт, когда пользователь нажимает ввод.Например, если пользователь вводит только «это», будут отображаться все 3 элемента.В этом случае, если он нажмет Enter, я бы хотел, чтобы список был закрыт.Мне не удается найти решение для этого.Надеюсь, кто-то может помочь.Приветствия.Марк.

http://jsfiddle.net/vXMDR/

Мой HTML:

<input id="search" type="input" />​

Мой JS:

$(function() {

    var availableTags = [
            "item1","item2","item3"
        ];

    $("#search").autocomplete({
        source:availableTags,
        minLength: 0
        });
});​

Answer 1

Вот решение: http://jsfiddle.net/vXMDR/3/

Дайте мне знать, если у вас есть вопросы.

Магия привязывает метод закрытия автозаполнения к нажатию клавиши

 $("#search").keypress(function(e){ 
    if (!e) e = window.event;   
    if (e.keyCode == '13'){
      $('#search').autocomplete('close');
      return false;
    }
  });

UPDATE

$("#search").keypress(function(e){ связывает нажатие элемента #search с указанной функцией, передавая объект event.Вы также можете написать это как $("#search").on('keypress', function(e) {...

if (!e) e = window.event;, гарантируя, что, если действительное событие не было передано, оно устанавливает e для текущего объекта window.event.

Наконец,if (e.keyCode == '13'){ проверяет, что значение кода события равно ключу ввода.Список допустимых кодов клавиш: см. Здесь .

Вот документация для метода закрытия автозаполнения - http://docs.jquery.com/UI/Autocomplete#method-close

Answer 2

$(function() {

    var availableTags = [
            "item1","item2","item3"
        ];

    $("#search").autocomplete({
        source:availableTags,
        minLength: 0
    }).keyup(function (e) {
        if(e.which === 13) {
            $(".ui-menu-item").hide();
        }            
    });
});​

http://jsfiddle.net/vXMDR/2/

Answer 3

Я столкнулся с этой проблемой и не смог использовать метод close (), потому что мое автозаполнение повторялось при каждой загрузке представления Backbone. Таким образом, новый элемент автозаполнения был добавлен к DOM и тем, кто застрял вокруг, даже несмотря на то, что присоединенный элемент ввода терялся и создавался заново. Избыточные элементы автозаполнения вызывали несколько проблем, но хуже всего было, когда пользователь нажимал клавишу ввода достаточно быстро, я должен был пройти через эту последовательность:

1. Пользователь печатает текст
2. Запрос предложений начинается исполнение
3. Событие нажатия клавиши запускается и выполняет полнотекстовый поиск (пользователь не выбрал что-то из автозаполнения)
4. Представление перезагружается, поле ввода и другие элементы перерисовываются, а новый элемент автозаполнения добавляется в конец DOM
5. Исходный запрос предложений возвращается с ответом, и предложения отображаются.

Обратите внимание, что предложения, отображаемые на шаге 5, теперь связаны с контейнером автозаполнения, который больше не связан с моим полем ввода, поэтому любые события, такие как нажатие клавиши esc или нажатие в другом месте на экране, ничего не будут делать. Предложения остаются там до тех пор, пока не произойдет полная перезагрузка страницы.

Я решил исправить это, сохранив mainContainerId самого последнего созданного элемента автозаполнения и удалив его вручную.

// during rendering
self.currentAutoComplete = $("#input-element").autocomplete({
  // set options
});

// later
if (this.currentAutoComplete) {
  $("#" + this.currentAutoComplete.mainContainerId).remove();
}

Answer 4

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

http://jsfiddle.net/vXMDR/46/

Это простой хак для хранения, отображать или нет отображениеавтозаполнение как логическое значение.(Я использую setTimeOut для создания сценария, в котором происходит ожидание, это сценарий проблемы, а не решение.)

shouldComplete = true;

$("#search").autocomplete({
    source:function (request, response) {            
        setTimeout(
            function() {
                response(shouldComplete ? availableTags : null);
            },
            2000);
    }        
    ,
    minLength: 0
    });

Затем, когда нажата кнопка ввода, для флага устанавливается значение false.Любой другой ключ активирует флаг.

$("#search").keypress(function(e){
    if (!e) e = window.event;   
    if (e.keyCode == '13'){
      $('#search').autocomplete('close');
        shouldComplete = false;
      return false;
    }
        else
        {
            shouldComplete = true;
        }
  });

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