На этом шаге мы рассмотрим сценарий обработки клавиш со стрелками.
Для определения нажатой клавиши можно использовать атрибут keyCode объекта события. Это позволит нам поджидать нажатия клавиш с кодами 38 и 40, соответствующих клавишам со стрелками вверх и вниз, и реагировать подобающим образом:
$('#search-text').attr('autocomplete','off').keyup(function(event) {
if (event.keyCode > 40 || event.keyCode == 8) {
// Клавиши с кодами 40 и ниже являются специальными клавишами
// (enter, клавиши со стрелками, escape и другие).
// Клавиша с кодом 8 - это клавиша забоя (backspace).
$.ajax({
'url': '../cgi-bin/autocomplete.php',
'data': {'search-text': $('#search-text').val()},
'dataType': 'json',
'type': 'GET',
'success': function(data) {
if (data.length) {
$autocomplete.empty();
$.each(data, function(index, term) {
$('<li></li>').text(term)
.appendTo($autocomplete)
.mouseover(function() {
setSelectedItem(index);
})
.click(function() {
$('#search-text').val(term);
$autocomplete.hide();
});
});
setSelectedItem(0);
}
else {
setSelectedItem(null);
}
}
});
}
else if (event.keyCode == 38 &&
selectedItem !== null) {
// Нажата клавиша со стрелкой вверх.
setSelectedItem(selectedItem - 1);
event.preventDefault();
}
else if (event.keyCode == 40 &&
selectedItem !== null) {
// Нажата клавиша со стрелкой вниз.
setSelectedItem(selectedItem + 1);
event.preventDefault();
}
});
Теперь наш обработчик события keyup проверяет значение свойства keyCode, определяя код нажатой клавиши, и выполняет соответствующие действия. Запрос AJAX теперь не посылается, если была нажата специальная клавиша, такая как клавиша со стрелкой или escape. Если было определено нажатие клавиши со стрелкой и при этом в текущий момент список вариантов отображается, обработчик изменяет индекс выбранного элемента на 1 в соответствующем направлении. Так как функция setSelectedItem() предусматривает ограничение значений диапазоном допустимых индексов в списке, нам можно не беспокоиться о том, что пользователь выйдет за пределы списка.
Рис.1. Обработка клавиш со стрелками
На следующем шаге мы рассмотрим вставку варианта в поле.
