Метод close

Метод close в Awesomplete отвечает за программное закрытие выпадающего списка подсказок. Он является частью базового API экземпляра и тесно связан с внутренним состоянием виджета автодополнения, управляющим отображением и скрытием списка результатов.

Метод close используется для принудительного скрытия списка подсказок, независимо от текущего состояния ввода пользователя или наличия совпадений в источнике данных. Это прямой механизм управления интерфейсом, который переводит компонент в состояние «закрыт».

Ключевая функция метода:

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

Сигнатура и базовое использование

Метод вызывается у экземпляра Awesomplete без параметров:

awesomplete.close();

Где awesomplete — экземпляр компонента, созданный через конструктор:

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

const awesomplete = new Awesomplete(input, {
  list: ["Apple", "Banana", "Orange"]
});

Вызов:

awesomplete.close();

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

Внутреннее поведение метода

При вызове close происходят следующие действия:

1. Изменение состояния видимости

Компонент переключает внутренний флаг состояния открытия (обычно opened) в значение false. Это влияет на все последующие проверки отображения списка.

2. Управление DOM-элементами

Выпадающий список (обычно <ul> контейнер) получает CSS-состояние скрытия. В зависимости от реализации это может быть:

  • добавление класса скрытия;
  • установка display: none;
  • изменение атрибутов доступности.

3. Сброс активного элемента

Если в списке был выбран или подсвечен элемент, он деактивируется:

  • снимается CSS-класс активного элемента;
  • сбрасывается индекс текущего выбора;
  • очищается состояние навигации стрелками.

4. Генерация события

После закрытия инициируется событие:

  • awesomplete-close

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

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

Сценарии автоматического вызова close

Метод close часто вызывается не напрямую, а внутри логики компонента.

Потеря фокуса (blur)

При уходе фокуса с поля ввода список автоматически закрывается:

input.addEventListener("blur", function () {
  awesomplete.close();
});

Выбор элемента

После выбора элемента из списка компонент закрывает выпадающее меню:

  • фиксируется выбранное значение;
  • список скрывается;
  • курсор возвращается в поле ввода.

Очистка ввода

При очистке значения input (например, через пользовательский код) список может быть закрыт, если больше нет валидных совпадений.

Нажатие клавиши ESC

Стандартное поведение клавиатурного управления включает закрытие списка по клавише Escape:

input.addEventListener("keydown", function (event) {
  if (event.key === "Escape") {
    awesomplete.close();
  }
});

Взаимодействие с методом open

Методы open и close являются антагонистами внутри API Awesomplete.

  • open() — делает список видимым;
  • close() — скрывает список.

Повторный вызов close() при уже закрытом состоянии не приводит к ошибкам и считается безопасной операцией.

awesomplete.close();
awesomplete.open();
awesomplete.close();

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

Влияние на состояние isOpened

Внутреннее свойство isOpened синхронизируется с вызовом метода:

  • после close() → isOpened = false;
  • после open() → isOpened = true.

Это значение используется для:

  • предотвращения повторного рендера списка;
  • контроля событий клавиатуры;
  • оптимизации перерисовки DOM.

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

Если список подсказок пуст или не инициализирован, вызов close():

  • не вызывает ошибок;
  • просто переводит компонент в закрытое состояние;
  • гарантирует консистентность UI.

Это делает метод устойчивым к ошибкам состояния.

CSS-связь и визуальное поведение

Хотя логика закрытия управляется JavaScript, визуальный результат зависит от CSS-реализации:

  • скрытие через класс состояния;
  • управление aria-hidden;
  • контроль видимости через display или visibility.

При кастомизации стилей важно учитывать, что close() не удаляет элементы из DOM, а лишь изменяет их состояние.

Событие awesomplete-close и его роль

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

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

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

input.addEventListener("awesomplete-close", function () {
  document.body.classList.remove("autocomplete-open");
});

Особенности повторного вызова

Метод можно вызывать многократно без побочных эффектов:

  • состояние остается закрытым;
  • событие может не дублироваться (в зависимости от реализации);
  • DOM не пересоздается.

Это позволяет безопасно использовать close() в обработчиках глобальных событий.

Типичные ошибки при использовании

Принудительное закрытие без учета UX

Частое закрытие списка при каждом вводе может ухудшать пользовательский опыт, так как прерывает выбор подсказок.

Игнорирование состояния фокуса

Вызов close() при активном фокусе может конфликтовать с логикой автопоказа подсказок.

Смешивание с кастомной логикой рендера

Если внешний код вручную управляет DOM списка, метод close() может не синхронизироваться с кастомными изменениями.

Роль метода в жизненном цикле компонента

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

Оглавление