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

    Так как при вводе искомого слова пользователь уже работает с клавиатурой, ему будет очень удобно управлять выбором варианта из списка с ее помощью. Чтобы обеспечить такую возможность, нам необходимо следить за вариантом, выбранным в текущий момент. Сначала мы можем добавить вспомогательную функцию, которая будет сохранять индекс элемента списка и воспроизводить необходимые визуальные эффекты, чтобы показать, какой элемент выбран в настоящий момент времени:

  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. Первый вариант автоматически выделяется после отображения списка

    Теперь нам следует обеспечить возможность выбора элемента списка с помощью клавиатуры.

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

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