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

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

http://jsfiddle.net/vXMDR/

Мой html:

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

Мои js:

$(function() {

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

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

Ответы

Ответ 1

$(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/

Ответ 2

Вот решение: 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'){ проверяет, что значение ключа события равно ключу 'enter'. Список действительных кодов клавиш см. Здесь.

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

Ответ 3

Я также модифицировал решение 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;
        }
  });

Можно сделать это более элегантно, я уверен, но это устраняет проблему, о которой может показаться ниже.

Ответ 4

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

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

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

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

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

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