Шаг 175.
Библиотека jQuery. Интерактивные формы. Компактные формы. Функция автодополнения на основе технологии AJAX. Обработка клавиш со стрелками

    На этом шаге мы рассмотрим сценарий обработки клавиш со стрелками.

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

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

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




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