Событие awesomplete-close

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

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

Момент возникновения события

Событие инициируется непосредственно перед тем, как список подсказок удаляется из DOM или скрывается через CSS-механизмы библиотеки. Это делает его ключевой точкой для вмешательства в процесс закрытия.

Основные ситуации, при которых вызывается awesomplete-close:

  • выбор элемента из списка предложений;
  • нажатие клавиши Esc;
  • потеря фокуса у поля ввода;
  • изменение значения, приводящее к отсутствию совпадений;
  • программное закрытие через API Awesomplete.

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

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

Событие представляет собой CustomEvent, привязанный к DOM-элементу input, на котором инициализирован Awesomplete.

Типичная структура:

  • type: "awesomplete-close"
  • target: input-элемент
  • instance: ссылка на экземпляр Awesomplete (доступна через event.target.awesomplete или внутренние поля)
  • cancelable: true

Факт отменяемости события играет ключевую роль в управлении поведением списка.

Отмена закрытия

Событие может быть отменено через event.preventDefault(). В этом случае список подсказок остаётся открытым, даже если стандартная логика Awesomplete инициировала его закрытие.

Это позволяет реализовывать нестандартные сценарии управления интерфейсом.

Пример перехвата:

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

input.addEventListener("awesomplete-close", function (event) {
    if (input.dataset.lockDropdown === "true") {
        event.preventDefault();
    }
});

В данном случае закрытие блокируется при наличии флага lockDropdown.

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

Если событие отменено:

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

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

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

Управление зависимыми интерфейсами

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

input.addEventListener("awesomplete-close", (e) => {
    document.querySelector(".hint-panel").classList.remove("active");
});

Блокировка закрытия при асинхронной загрузке

При подгрузке данных из API список может быть временно зафиксирован открытым состоянием.

let loading = false;

input.addEventListener("awesomplete-close", (e) => {
    if (loading) {
        e.preventDefault();
    }
});

Сохранение состояния выбора

Закрытие списка часто используется как триггер фиксации выбранного значения.

input.addEventListener("awesomplete-close", (e) => {
    console.log("Dropdown closed, current value:", input.value);
});

Отличие от связанных событий

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

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

awesomplete-close отличается тем, что не связан с выбором конкретного элемента, а отражает именно завершение визуального взаимодействия со списком.

Причины закрытия и их обработка

Закрытие списка может происходить по разным причинам, и событие не содержит явного поля причины, поэтому её обычно определяют косвенно:

  • по состоянию клавиатурного ввода (ESC);
  • по изменению input.value;
  • по blur-событию;
  • по внутренней логике фильтрации.

Пример логирования поведения:

input.addEventListener("awesomplete-close", () => {
    console.log("Awesomplete closed at", new Date().toISOString());
});

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

При потере фокуса поле ввода часто инициирует закрытие списка. Однако отмена события awesomplete-close не возвращает фокус автоматически. Это означает, что список может оставаться открытым даже при неактивном input, если дополнительно не управлять фокусом вручную.

Программное управление закрытием

Awesomplete позволяет закрывать список через API, например:

awesomplete.close();

В этом случае также генерируется событие awesomplete-close, что обеспечивает единообразие обработки вне зависимости от источника закрытия.

Потенциальные особенности поведения

При активной кастомизации возможны следующие нюансы:

  • повторное открытие сразу после отменённого закрытия при изменении input;
  • конфликт между blur и keyboard events;
  • задержка визуального скрытия при сложных стилях CSS;
  • множественные вызовы события при цепочке внутренних триггеров.

Эти эффекты не являются ошибками, а отражают событийную природу работы библиотеки.

Практические паттерны использования

Фиксация UI состояния

input.addEventListener("awesomplete-close", () => {
    state.dropdownOpen = false;
});

Интеграция с аналитикой

input.addEventListener("awesomplete-close", () => {
    analytics.track("autocomplete_closed");
});

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

input.addEventListener("awesomplete-close", () => {
    dropdownShadow.classList.remove("visible");
});

Поведение при множественных инстансах

Если на странице используется несколько экземпляров Awesomplete, каждое событие awesomplete-close изолировано и относится только к конкретному input-элементу. Это позволяет безопасно управлять множественными автодополнениями без пересечения состояния между ними.

Оглавление