Шаг 176.
Библиотека jQuery. Интерактивные формы. Компактные формы. Функция автодополнения на основе технологии AJAX. Вставка варианта в поле

    На этом шаге мы рассмотрим обработку нажатия клавиши Enter.

    Далее нам необходимо обработать нажатие на клавишу Enter. Когда список вариантов отображается на экране, нажатие на клавишу Enter должно приводить к записи текущего выбранного элемента в поле ввода. Поскольку эту операцию нам потребуется вызывать в двух местах, мы выделим процедуру заполнения поля (которая уже была реализована ранее и вызывается в ответ на щелчок мышью) в отдельную функцию:

  var populateSearchField = function() {
    $('#search-text').val($autocomplete
    .find('li').eq(selectedItem).text());
    setSelectedItem(null);
  };

    Теперь можно упростить наш обработчик события click и вызывать в нем эту функцию. Эту функцию можно вызывать также при обработке события нажатия на клавишу Enter:

  $('#search-text').keypress(function(event) {
    if (event.keyCode == 13 && selectedItem !== null) {
      // Пользователь нажал клавишу enter.
      populateSearchField();
      event.preventDefault();
    }
  });

    Этот обработчик подключается к событию keypress, а не к событию keyup, как прежде. Это обусловлено необходимостью предотвратить отправку формы по нажатию на клавишу. Если бы мы дождались события keyup, форма к этому моменту была бы уже отправлена.


Рис.1. Обработка нажатия клавиши Enter

Полный текст этого примера можно взять здесь.

    На следующем шаге мы рассмотрим удаление списка вариантов.




Предыдущий шаг Содержание Следующий шаг