Чтение текущего состояния

Внутреннее состояние экземпляра включает набор полей, отражающих текущее поведение автодополнения: открыт ли список, какой элемент выбран, какой набор данных отображается, а также позицию курсора в списке. Доступ к этим данным осуществляется напрямую через свойства экземпляра и через связанные DOM-узлы.

Ключевым объектом является сам экземпляр, создаваемый через new Awesomplete(input, options). Именно он хранит актуальные значения состояния и управляет синхронизацией между вводом пользователя и списком подсказок.

Состояние открытия списка

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

awesomplete.opened; // true | false

Свойство opened отражает текущее отображение списка подсказок. Оно изменяется автоматически при вызове методов open() и close(), а также в процессе обработки ввода.

Дополнительно состояние можно косвенно определить через DOM:

awesomplete.ul.getAttribute("aria-expanded");

Значение "true" соответствует открытому списку, "false" — закрытому. Это важно для интеграции с доступностью (ARIA).

Текущий выбранный элемент

Навигация по списку подсказок осуществляется через индекс:

awesomplete.index;

Это число указывает на текущую позицию активного элемента в списке ul.children. При изменении клавишами стрелок значение увеличивается или уменьшается в пределах допустимого диапазона.

Если ни один элемент не выбран, значение обычно устанавливается в -1.

Связь с DOM:

awesomplete.ul.children[awesomplete.index];

Активный элемент помечается CSS-классом:

<li aria-selected="true" class="awesomplete active"></li>

Текущий выбранный элемент как данные

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

awesomplete._list[awesomplete.index];

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

awesomplete.get_item(awesomplete.index);

Метод возвращает DOM-элемент, соответствующий текущей позиции.

Источник данных и текущее состояние списка

Текущий набор предложений хранится в нормализованном виде после фильтрации:

awesomplete.suggestions;

Этот массив формируется после применения:

  • фильтра filter
  • сортировки sort
  • ограничения maxItems

Состояние списка всегда отражает уже обработанный набор данных, а не исходный list.

Текущее значение ввода

Состояние ввода является центральным источником синхронизации:

awesomplete.input.value;

Именно значение input.value используется для пересчёта подсказок при каждом событии input или keyup.

Дополнительно библиотека хранит нормализованную версию:

awesomplete.value;

Это значение учитывает возможные преобразования через replace() и может отличаться от исходного текста в поле.

Состояние фокуса и активности

Фокус ввода влияет на поведение раскрытия списка:

document.activeElement === awesomplete.input;

Если элемент не в фокусе, список автоматически закрывается (в зависимости от настроек).

Также используется внутренний флаг активности:

awesomplete.isOpened;

Он отражает логическое состояние работы списка независимо от DOM.

Отслеживание текущего элемента через ARIA

Для взаимодействия с экранными читалками используются атрибуты:

awesomplete.input.getAttribute("aria-activedescendant");

Значение содержит id текущего активного элемента списка:

aria-activedescendant="awesomplete_list_2_item_1"

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

Внутреннее состояние навигации

Навигация по списку управляется через комбинацию индекса и ограничения:

awesomplete.maxItems;
awesomplete.minChars;

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

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

  • input.length < minChars → список закрыт
  • suggestions.length === 0 → индекс сбрасывается
  • index >= suggestions.length → индекс корректируется

Проверка наличия активного выбора

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

awesomplete.index > -1 && awesomplete.suggestions.length > 0;

Также возможно использовать DOM-проверку:

awesomplete.ul.querySelector("[aria-selected='true']");

Если результат null, активного выбора нет.

Состояние через события

Библиотека предоставляет события, отражающие изменение состояния:

  • awesomplete-open
  • awesomplete-close
  • awesomplete-select

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

input.addEventListener("awesomplete-select", function (e) {
  console.log(e.text);
});

Событие select содержит финальное состояние выбранного элемента:

e.text.value
e.text.label

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

При каждом изменении ввода выполняется пересборка состояния:

  1. Чтение input.value
  2. Применение фильтра
  3. Обновление suggestions
  4. Сброс или корректировка index
  5. Обновление DOM (ul.children)
  6. Обновление ARIA-состояний

Любое из этих действий может изменить текущее состояние экземпляра.

Состояние контейнера и DOM-структуры

Контейнер списка:

awesomplete.container;

Содержит ul и управляет позиционированием списка относительно input. Состояние контейнера важно при динамическом изменении стилей или перемещении элемента в DOM.

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

Состояние можно представить как совокупность взаимосвязанных элементов:

  • input.value — текущее значение ввода
  • suggestions — отфильтрованный список
  • index — активная позиция
  • opened — видимость списка
  • ul — DOM-отображение
  • ARIA-атрибуты — доступность и синхронизация интерфейса

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

Оглавление