Шаг 174.
Библиотека jQuery. Интерактивные формы. Компактные формы. Функция автодополнения на основе технологии AJAX. Навигация с помощью клавиатуры

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

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

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

Полный текст этого примера можно взять здесь.

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

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




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