Событие awesomplete-open

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

awesomplete-open срабатывает после того, как:

  • выполнена фильтрация данных источника;
  • сформирован список подходящих вариантов;
  • элемент списка подсказок отрисован в DOM;
  • выпадающий блок становится видимым для пользователя.

Важно, что событие не инициирует открытие списка, а лишь сигнализирует о факте его открытия.

Поведение компонента при открытии

При открытии списка Awesomplete переводит внутреннее состояние в активный режим отображения результатов. В этот момент:

  • активируется навигация по элементам клавиатурой;
  • обновляется текущий выделенный элемент (обычно первый в списке);
  • закрепляется позиция выпадающего блока относительно input-поля;
  • может происходить пересчёт позиционирования при изменении размеров окна.

Событие awesomplete-open фиксирует именно завершение этих действий.

Способы подписки на событие

Подписка осуществляется через стандартный механизм DOM-событий:

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

input.addEventListener("awesomplete-open", function (event) {
    console.log("Список подсказок открыт");
});

Также возможно назначение обработчика через свойство экземпляра Awesomplete:

const awesomplete = new Awesomplete(input);

input.addEventListener("awesomplete-open", () => {
    console.log("Open event triggered");
});

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

Объект события

Объект события Event, передаваемый обработчику, содержит стандартные свойства DOM-событий:

  • type — всегда awesomplete-open;
  • target — input-элемент, связанный с экземпляром Awesomplete;
  • currentTarget — тот же элемент, на котором зарегистрирован слушатель;
  • bubbles — true, событие всплывает по DOM-дереву.

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

Связь с другими событиями Awesomplete

awesomplete-open является частью цепочки событий жизненного цикла списка подсказок:

  • awesomplete-selectcomplete — выбор элемента и завершение ввода;
  • awesomplete-close — закрытие списка;
  • awesomplete-open — открытие списка.

В отличие от awesomplete-select и awesomplete-selectcomplete, событие открытия не связано с изменением значения input.

Условия срабатывания

Событие может срабатывать многократно в рамках одного сеанса ввода. Основные триггеры:

  • ввод символов, приводящий к появлению результатов;
  • повторное открытие после закрытия списка;
  • программное изменение значения input, вызывающее перерасчёт предложений.

Если список уже открыт, повторное открытие не генерирует событие, пока состояние не будет изменено на закрытое.

Особенности асинхронного поведения

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

  1. пользователь вводит значение;
  2. выполняется асинхронный запрос;
  3. получены данные;
  4. построен список;
  5. список отображается;
  6. генерируется awesomplete-open.

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

Управление поведением через событие

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

  • логирование факта открытия списка;
  • синхронизация интерфейсов;
  • изменение состояния внешних компонентов;
  • аналитика взаимодействия пользователя с автодополнением.

Пример логирования состояния:

input.addEventListener("awesomplete-open", () => {
    performance.mark("awesomplete-opened");
});

Взаимодействие с фокусом

Открытие списка не изменяет фокус input-элемента. Однако при срабатывании события часто наблюдаются сопутствующие изменения:

  • активируется режим навигации стрелками;
  • первый элемент списка становится потенциально выбранным;
  • доступность (accessibility) обновляет ARIA-атрибуты, если они используются.

Эти изменения происходят синхронно с моментом генерации события.

Типичные сценарии использования

Чаще всего awesomplete-open применяется для:

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

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

Ограничения

Событие не предоставляет:

  • списка текущих подсказок;
  • информации о выбранном элементе;
  • данных о запросе или источнике;
  • возможности предотвратить открытие.

Все эти данные необходимо получать через экземпляр Awesomplete или через состояние input-элемента.

Оглавление