На этом шаге мы рассмотрим подготовку списка для обработки его с клавиатуры.
Так как при вводе искомого слова пользователь уже работает с клавиатурой, ему будет очень удобно управлять выбором варианта из списка с ее помощью. Чтобы обеспечить такую возможность, нам необходимо следить за вариантом, выбранным в текущий момент. Сначала мы можем добавить вспомогательную функцию, которая будет сохранять индекс элемента списка и воспроизводить необходимые визуальные эффекты, чтобы показать, какой элемент выбран в настоящий момент времени:
var selectedItem = null; var setSelectedItem = function(item) { selectedItem = item; if (selectedItem === null) { $autocomplete.hide(); return; } if (selectedItem < 0) { selectedItem = 0; } if (selectedItem >= $autocomplete.find('li').length) { selectedItem = $autocomplete.find('li').length - 1; } $autocomplete.find('li').removeClass('selected') .eq(selectedItem).addClass('selected'); $autocomplete.show(); };
Переменная selectedItem будет содержать значение null, когда не выбран ни один из элементов списка. Обращаясь к функции setSelectedItem(), изменяющей значение переменной, мы можем гарантировать, что список вариантов будет отображаться, только когда имеется выбранный элемент.
Используются две проверки числового значения переменной selectedItem, чтобы поместить результаты в соответствующие рамки. Без этих проверок переменная selectedItem могла бы принимать любые значения, даже отрицательные. Эта функция гарантирует, что текущее значение переменной selectedItem всегда будет представлять допустимый индекс в списке вариантов.
Теперь можно дополнить существующую реализацию, добавив в нее вызов новой функции:
$('#search-text').keyup(function() { $.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); } } }); });
Эта версия обладает несколькими неоспоримыми преимуществами. Во-первых, список вариантов скрывается при отсутствии вариантов дополнения искомой строки. Во-вторых, мы добавили обработчик события mouseover, который выделяет элемент, находящийся под указателем мыши. В-третьих, первый элемент списка выделяется сразу же после отображения списка, как показано на рисунке 1.
Рис.1. Первый вариант автоматически выделяется после отображения списка
Теперь нам следует обеспечить возможность выбора элемента списка с помощью клавиатуры.
На следующем шаге мы рассмотрим обработку клавиш со стрелками.