Метод open

Метод (или управляющее свойство) open в Awesomplete отвечает за принудительное открытие выпадающего списка подсказок и перевод компонента в активное состояние отображения результатов автодополнения. Его основная задача — управлять видимостью списка независимо от текущего пользовательского ввода, сохраняя при этом согласованность внутреннего состояния виджета.

В стандартном сценарии Awesomplete открывает список автоматически при наличии совпадений с текущим значением поля ввода. Однако в реальных интерфейсах часто требуется внешнее управление:

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

Именно для таких случаев используется open.

Поведение при активации open

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

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

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

Способы управления open

В зависимости от версии и интеграции Awesomplete, управление открытием может реализовываться несколькими способами.

1. Через логическое свойство

Наиболее распространённый подход — установка свойства:

const awesomplete = new Awesomplete(input, {
  list: ["JavaScript", "Java", "Python", "PHP"]
});

awesomplete.open = true;

При присвоении true компонент автоматически вызывает обновление списка и делает его видимым.

Закрытие выполняется аналогично:

awesomplete.open = false;

2. Через программный вызов поведения

В некоторых реализациях или обёртках может использоваться методическое открытие:

awesomplete.open();

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

Взаимодействие с фильтрацией данных

Открытие списка тесно связано с механизмом фильтрации. При активации open:

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

Таким образом, open не отключает фильтрацию, а инициирует её выполнение в момент отображения.

Событие awesomplete-open

При успешном открытии списка генерируется событие:

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

Это событие используется для:

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

Событие срабатывает после того, как список уже стал видимым и DOM обновлён.

Условия, влияющие на открытие

Несмотря на явную активацию open, существует ряд условий, которые могут изменить результат:

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

В таких случаях установка open = true может не привести к визуальному отображению списка.

Связь с жизненным циклом Awesomplete

open является частью состояния компонента и тесно связан с другими этапами:

  • evaluate — пересчёт списка;
  • close — закрытие и очистка активного состояния;
  • select — выбор элемента из открытого списка;
  • highlight — навигация по элементам внутри открытого состояния.

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

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

Чаще всего open используется в следующих архитектурных ситуациях:

Открытие по фокусу

input.addEventListener("focus", () => {
  awesomplete.open = true;
});

Кастомная кнопка раскрытия

button.addEventListener("click", () => {
  awesomplete.open = !awesomplete.open;
});

Открытие после загрузки данных

fetch("/api/suggestions")
  .then(r => r.json())
  .then(data => {
    awesomplete.list = data;
    awesomplete.open = true;
  });

Влияние на DOM-состояние

При активации open изменяются ключевые DOM-аспекты:

  • добавляется класс активности к контейнеру списка;
  • список становится видимым (display или аналогичная логика);
  • обновляется позиционирование относительно input;
  • активируется навигация с клавиатуры.

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

Особенности повторного открытия

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

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

Это предотвращает лишние перерисовки и сохраняет производительность.

Связь с пользовательским вводом

Открытие списка через open не блокирует ввод текста. Однако ввод влияет на:

  • состав отображаемых подсказок;
  • порядок элементов;
  • активный (highlighted) элемент.

Таким образом, open и пользовательский input работают параллельно, а не взаимоисключающе.

Оглавление