Клавиши стрелок

В Awesomplete клавиши-стрелки являются основным механизмом перемещения по списку подсказок. Поведение встроено в обработчики событий клавиатуры и активируется автоматически при открытии выпадающего списка.

При вводе текста и появлении списка предложений библиотека отслеживает нажатия клавиш:

  • ArrowDown (↓) — перемещение вниз по списку
  • ArrowUp (↑) — перемещение вверх по списку

Активный элемент списка изменяется без необходимости дополнительной логики со стороны разработчика. Awesomplete управляет состоянием выделения через внутренний индекс текущего элемента.

Базовое поведение навигации

После открытия списка подсказок первый клик по ArrowDown переводит активный элемент на первую строку. Дальнейшие нажатия перемещают выделение последовательно вниз.

ArrowUp работает симметрично, позволяя двигаться вверх по уже активированному списку.

Ключевая особенность заключается в том, что список воспринимается как циклическая структура при включённой опции list-навигации: при достижении конца выделение может переходить к началу и наоборот, в зависимости от конфигурации.

Состояние активного элемента

Awesomplete хранит индекс активного элемента внутри экземпляра компонента. При каждом нажатии стрелок выполняются следующие действия:

  1. Проверяется текущее состояние списка
  2. Вычисляется новый индекс
  3. Обновляется DOM-класс активного элемента
  4. Обновляется aria-состояние (для доступности)

Активный элемент получает CSS-класс:

li[aria-selected="true"] {
    background: #e9e9e9;
}

Стандартная логика обработки клавиш

Внутренний обработчик клавиатуры реализует поведение, аналогичное следующему псевдокоду:

input.addEventListener("keydown", function (event) {
    switch (event.keyCode) {
        case 40: // ArrowDown
            awesomplete.next();
            event.preventDefault();
            break;

        case 38: // ArrowUp
            awesomplete.previous();
            event.preventDefault();
            break;
    }
});

Методы next() и previous() изменяют активный индекс и перерисовывают выделение.

Циклическая навигация

При достижении границ списка возможны два сценария:

  • остановка на последнем/первом элементе
  • переход по кругу (wrap-around)

Поведение зависит от конфигурации и внутреннего состояния списка. При большом количестве элементов циклическая навигация позволяет ускорить выбор без возврата к мыши или повторного ввода.

Синхронизация с вводом текста

Навигация стрелками тесно связана с состоянием input-поля. При перемещении по списку:

  • текст в input временно обновляется значением активного элемента
  • оригинальный ввод сохраняется в буфере
  • при отмене выбора (например, Escape) восстанавливается исходный текст

Это позволяет безопасно просматривать варианты без потери введённых данных.

Поведение при быстром вводе

Если пользователь продолжает печатать во время навигации стрелками:

  • список пересчитывается заново
  • индекс активного элемента сбрасывается
  • выделение возвращается к первому подходящему элементу

Это предотвращает рассинхронизацию между текущим запросом и отображаемыми результатами.

Предотвращение стандартного поведения браузера

Для корректной работы навигации Awesomplete блокирует стандартные действия клавиш:

  • прокрутку страницы при ArrowUp/ArrowDown
  • перемещение курсора в неожиданных местах

Это достигается через event.preventDefault(), что гарантирует, что стрелки управляют только списком, а не интерфейсом страницы.

Интеграция с выбором элемента

Нажатие Enter после навигации стрелками приводит к выбору активного элемента. Логика выглядит следующим образом:

  1. Пользователь перемещается стрелками
  2. Активный элемент обновляется
  3. Enter фиксирует текущий выбор
  4. Значение подставляется в input
  5. Событие awesomplete-selectcomplete срабатывает

Таким образом стрелки являются подготовительным этапом выбора.

Обработка пустого списка

Если список подсказок пуст:

  • нажатия ArrowUp и ArrowDown игнорируются
  • индекс активного элемента не изменяется
  • визуальное выделение отсутствует

Это предотвращает ошибки при отсутствии данных и исключает некорректные состояния.

Доступность и ARIA-состояния

При навигации стрелками Awesomplete синхронизирует состояние с ARIA-атрибутами:

  • aria-selected
  • aria-activedescendant

Это обеспечивает корректную работу с экранными читалками. Каждый шаг по списку обновляет связку input → active item.

Кастомизация поведения стрелок

Разработчик может переопределить стандартную логику, используя обработчики событий:

input.addEventListener("keydown", function (e) {
    if (e.key === "ArrowDown") {
        // кастомная логика перед переходом вниз
    }
});

При необходимости стандартное поведение можно полностью отключить, не вызывая встроенные методы Awesomplete.

Взаимодействие с мышью и стрелками

Навигация стрелками и наведение мышью используют единое состояние активного элемента. При движении курсора:

  • индекс обновляется в соответствии с hovered элементом
  • стрелки продолжают движение от текущей позиции мыши
  • конфликт состояний исключается за счёт централизованного управления индексом

Особенности работы в разных браузерах

Поведение стрелок может незначительно отличаться в зависимости от браузера:

  • различия в кодах клавиш (keyCode vs key)
  • различия в обработке фокуса
  • различия в порядке событий keydown/keyup

Awesomplete нормализует эти различия через единый обработчик событий клавиатуры, минимизируя платформенные расхождения.

Сброс состояния навигации

При закрытии списка происходит сброс:

  • активный индекс устанавливается в -1
  • выделение снимается со всех элементов
  • ARIA-состояния очищаются

При повторном открытии навигация начинается с нулевого состояния независимо от предыдущих действий.

Оглавление