Событие awesomplete-highlight

Событие awesomplete-highlight срабатывает в момент, когда пользователь перемещает фокус подсветки на один из элементов выпадающего списка автодополнения. Это промежуточный этап взаимодействия между появлением списка подсказок и окончательным выбором значения.

Подсветка в контексте Awesomplete означает активный элемент списка, который пользователь выделяет с помощью клавиш ↑ / ↓ или наведением мыши. Именно изменение этого активного элемента и вызывает событие.

Событие возникает каждый раз, когда изменяется текущий индекс выделенного элемента списка:

  • при нажатии клавиши ↓ (перемещение вниз по списку)
  • при нажатии клавиши ↑ (перемещение вверх по списку)
  • при наведении курсора мыши на элемент
  • при программном изменении значения через API Awesomplete

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

Структура события

Обработчик awesomplete-highlight получает объект события, содержащий полезные данные о текущем состоянии списка.

Основные поля:

  • text — объект, содержащий данные выбранного элемента

    • label — отображаемый текст
    • value — значение, которое будет вставлено при выборе

  • index — индекс текущего элемента в массиве подсказок

  • originalEvent — исходное DOM-событие (keyboard или mouse), вызвавшее изменение

Пример базового использования

const input = document.querySelector("#city");

const awesomplete = new Awesomplete(input, {
  list: ["Almaty", "Astana", "Shymkent", "Karaganda"]
});

input.addEventListener("awesomplete-highlight", function (event) {
  console.log("Подсвечен элемент:", event.text.label);
  console.log("Индекс:", event.index);
});

В данном примере каждый раз при перемещении по списку подсказок в консоль выводится информация о текущем активном элементе.

Отличие от awesomplete-select

Ключевое различие между событиями:

  • awesomplete-highlight — изменение подсветки, выбор ещё не произошёл
  • awesomplete-select — пользователь подтвердил выбор (Enter или клик)

Это различие критично для сценариев, где требуется предварительный просмотр данных без их фиксации в input.

Практическое применение

Предварительный предпросмотр данных

Событие часто используется для динамического отображения дополнительной информации о текущей подсказке.

input.addEventListener("awesomplete-highlight", function (event) {
  document.querySelector("#preview").textContent =
    "Выбрано: " + event.text.label;
});

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

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

При наличии сложных UI-компонентов подсветка может управлять состоянием других элементов интерфейса:

  • карты (геолокация города)
  • карточки товаров
  • изображения или описания
input.addEventListener("awesomplete-highlight", function (event) {
  updateMap(event.text.value);
});

Логирование пользовательского поведения

Событие может использоваться для аналитики взаимодействий:

input.addEventListener("awesomplete-highlight", function (event) {
  analytics.log("autocomplete_highlight", {
    value: event.text.value,
    index: event.index
  });
});

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

Поведение при отсутствии подсказок

Если список пуст или фильтрация не возвращает результатов, событие awesomplete-highlight не вызывается. Подсветка просто отсутствует, так как нет активных элементов.

Особенности работы с клавиатурой

При навигации с клавиатуры событие генерируется строго последовательно:

  1. Пользователь открывает список подсказок
  2. Нажимает ↓
  3. Активируется первый элемент → вызывается событие
  4. Последующие нажатия ↓ / ↑ продолжают изменять индекс и повторно вызывают событие

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

Особенности работы с мышью

При наведении курсора:

  • предыдущий активный элемент теряет подсветку
  • новый элемент становится активным
  • событие вызывается немедленно при каждом изменении hover-состояния

Это важно учитывать при сложных интерфейсах, где hover может часто меняться.

Взаимодействие с кастомными списками

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

input.addEventListener("awesomplete-highlight", function (event) {
  highlightCustomRow(event.index);
});

Ограничения и нюансы

  • событие не гарантирует окончательный выбор значения
  • может вызываться многократно при удержании клавиш
  • не следует использовать как единственный источник “финального” значения
  • не заменяет событие выбора

При высокой частоте обновлений (например, при быстром перемещении стрелками) обработчики должны быть оптимизированы, чтобы не перегружать интерфейс.

Роль в архитектуре автодополнения

awesomplete-highlight выступает как промежуточный слой между фильтрацией данных и финальным выбором. Он формирует интерактивность интерфейса, делая автодополнение не статическим списком, а динамической системой навигации по вариантам.

Оглавление