На этом шаге мы рассмотрим обработку нажатия клавиши 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
На следующем шаге мы рассмотрим удаление списка вариантов.
