Доступ к внутренним элементам

Экземпляр Awesomplete после инициализации связывает исходное поле ввода с набором внутренних DOM-узлов, которые формируют интерфейс автодополнения. Вся работа библиотеки строится вокруг трёх ключевых элементов: поля ввода, контейнера списка и самого списка подсказок.

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

Свойство input: базовая точка привязки

input — это ссылка на исходный HTMLInputElement, переданный при создании экземпляра.

const aw = new Awesomplete(inputElement);
console.log(aw.input);

Через input осуществляется:

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

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

Свойство ul: контейнер списка подсказок

ul представляет собой DOM-элемент списка <ul>, который Awesomplete использует для отображения вариантов автодополнения.

const list = aw.ul;
console.log(list.tagName); // UL

Особенности ul:

  • создаётся автоматически при инициализации
  • добавляется в DOM рядом с input или внутри контейнера
  • содержит элементы <li> для каждой подсказки
  • управляется библиотекой при открытии и закрытии списка

Через ul можно:

  • изменять CSS-классы контейнера списка
  • добавлять кастомные атрибуты
  • перехватывать события на уровне списка

Пример кастомизации:

aw.ul.classList.add("custom-suggestions");

Свойство container: внешний обёрточный элемент

container — это DOM-элемент-обёртка, внутри которого размещаются input и ul.

console.log(aw.container);

Если Awesomplete инициализируется без явного контейнера, он создаёт его автоматически, оборачивая исходный input.

Функции контейнера:

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

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

<div class="awesomplete">
    <input />
    <ul></ul>
</div>

Доступ к container позволяет интегрировать библиотеку в сложные UI-системы, где требуется управление слоями, z-index и позиционированием.

Элементы списка: li и их связь с данными

Каждая подсказка внутри ul представлена элементом <li>. Эти элементы создаются динамически при каждом обновлении списка.

Доступ к ним возможен через:

aw.ul.children

или косвенно через обработку событий.

Каждый li содержит:

  • отображаемый текст подсказки
  • индекс в исходном массиве данных
  • внутренние data-атрибуты (в зависимости от конфигурации)

Awesomplete использует класс selected для активного элемента:

aw.ul.querySelectorAll("li.selected");

Изменение состояния происходит при навигации клавишами или программном вызове методов.

Связь DOM-структуры и массива данных

Внутренне Awesomplete хранит массив данных, который синхронизируется с DOM-элементами li.

Логика построения:

  1. исходный массив фильтруется
  2. создаются элементы <li>
  3. каждый элемент связывается с индексом данных
  4. при выборе происходит обратное сопоставление

Эта связь позволяет:

  • быстро восстанавливать значение по клику
  • поддерживать кастомные рендеры
  • переиспользовать DOM при обновлениях

Доступ к активному элементу и индексу

Awesomplete хранит текущее состояние выделения:

  • индекс активного элемента
  • ссылку на текущий DOM-узел

Пример обращения:

aw.index
aw.ul.children[aw.index]

index используется для:

  • навигации вверх/вниз
  • выбора текущей подсказки
  • синхронизации UI состояния

Активный элемент обычно имеет класс:

li[aria-selected="true"]

или внутренний класс selected.

Программное взаимодействие с DOM-элементами

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

Изменение отображения списка

aw.ul.style.maxHeight = "300px";
aw.ul.style.overflowY = "auto";

Динамическая модификация контейнера

aw.container.setAttribute("data-state", "active");

Перехват событий на уровне элементов

aw.ul.addEventListener("click", (e) => {
    if (e.target.tagName === "LI") {
        console.log("Выбрана подсказка:", e.target.textContent);
    }
});

Внутренние ссылки и синхронизация состояния

Awesomplete поддерживает строгую связь между:

  • input.value
  • списком ul
  • выбранным li
  • внутренним индексом

Любое изменение одного из элементов приводит к пересборке состояния.

При вводе текста:

  • обновляется фильтр
  • пересоздаётся список li
  • сбрасывается или корректируется index
  • обновляется видимость ul

Управление отображением через DOM-элементы

Состояние списка часто контролируется через классы:

  • open — список открыт
  • hidden — список скрыт
  • active — активный элемент

Пример управления:

aw.ul.classList.add("open");
aw.ul.classList.remove("hidden");

Контейнер может использоваться для глобального состояния:

aw.container.classList.toggle("awesomplete--focused");

Практика доступа через экземпляр Awesomplete

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

  • aw.input
  • aw.ul
  • aw.container

Это позволяет:

  • интегрировать библиотеку в кастомные фреймворки
  • управлять стилями без пересоздания компонента
  • расширять стандартную логику автодополнения
  • строить собственные UI-надстройки поверх базового поведения

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

Оглавление