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