Свойство ul

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

При инициализации экземпляра автодополнения библиотека создаёт контейнер для списка предложений. Этот контейнер закрепляется за свойством:

instance.ul

Фактически это элемент:

<ul role="listbox"></ul>

Он служит оболочкой для всех элементов подсказок (<li>), которые формируются при каждом обновлении набора данных.

Ключевая особенность:

  • ul существует один на экземпляр
  • не пересоздаётся при каждом поиске
  • динамически очищается и наполняется новыми элементами

Жизненный цикл ul

Создание

При создании экземпляра:

const input = document.querySelector("input");
const awesomplete = new Awesomplete(input);

внутри конструктора происходит:

  • создание ul
  • установка ARIA-атрибутов
  • привязка к input через DOM-структуру
  • вставка в документ (обычно рядом с input)

Наполнение

Каждый раз при вызове обновления списка:

  • старые <li> удаляются
  • новые элементы создаются из массива данных
  • вставляются в ul

Пример логики:

awesomplete.list = ["Apple", "Banana", "Cherry"];

После фильтрации:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

Очистка

При закрытии списка:

  • содержимое ul очищается
  • визуально элемент скрывается
  • фокус возвращается к input (если применимо)

Важно: сам ul не удаляется из DOM.

Свойства DOM-узла ul

Так как ul — это полноценный DOM-элемент, он поддерживает стандартные API:

  • classList
  • style
  • setAttribute / getAttribute
  • appendChild / removeChild
  • innerHTML

Однако прямое вмешательство требует осторожности, поскольку библиотека ожидает контроль над структурой.

Управление отображением через ul

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

Изменение CSS-классов

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

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

  • менять позиционирование
  • переопределять стили списка
  • управлять анимациями появления

Прямое изменение стилей

awesomplete.ul.style.maxHeight = "200px";
awesomplete.ul.style.overflowY = "auto";

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

  • ограничения высоты списка
  • добавления прокрутки
  • адаптации под мобильные устройства

Взаимодействие с ARIA и доступностью

ul автоматически получает атрибут:

role="listbox"

и связан с input через:

  • aria-expanded
  • aria-owns
  • aria-activedescendant

Каждый <li> внутри ul получает:

role="option"

Это обеспечивает:

  • корректную работу скринридеров
  • навигацию с клавиатуры
  • семантическую структуру списка

Программное управление содержимым ul

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

Очистка вручную

awesomplete.ul.innerHTML = "";

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

Добавление кастомных элементов

const li = document.createElement("li");
li.textContent = "Custom item";
awesomplete.ul.appendChild(li);

Следует учитывать:

  • библиотека не будет обрабатывать такие элементы
  • навигация стрелками может работать некорректно
  • события выбора могут не срабатывать

Состояние ul при разных режимах работы

Пустой список

<ul hidden></ul>

или:

  • display: none
  • отсутствие дочерних <li>

Активный список

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

Навигация по элементам

При использовании клавиатуры:

  • текущий элемент подсветки управляется классами
  • ul служит контейнером контекста выделения
  • состояние синхронизируется с input

Позиционирование ul

Библиотека вычисляет положение ul относительно поля ввода:

  • по координатам getBoundingClientRect()
  • с учётом прокрутки страницы
  • с учётом offset-родителей

Типичное поведение:

  • ul размещается под input
  • ширина синхронизируется с input
  • при нехватке места может отображаться сверху (в зависимости от настроек и CSS)

Влияние кастомных стилей на ul

Изменение CSS может затронуть:

  • корректность позиционирования
  • читаемость подсказок
  • поведение overflow

Особенно критичны свойства:

position
top / left
width
display

Их переопределение без учёта логики библиотеки может привести к:

  • смещению списка
  • потере привязки к input
  • некорректной работе навигации

Роль ul в производительности

Так как ul переиспользуется:

  • минимизируется количество DOM-операций
  • исключается постоянное создание контейнера
  • ускоряется обновление списка

Основная нагрузка приходится не на ul, а на генерацию <li>.

Связь ul с внутренними методами Awesomplete

Через ul библиотека:

  • добавляет элементы (appendChild)
  • очищает список (innerHTML = "")
  • управляет видимостью (hidden / style.display)
  • синхронизирует активный элемент

Это делает ul центральной точкой визуального слоя автодополнения.

Особенности при кастомных списках

При использовании кастомного рендера:

  • структура внутри ul может отличаться
  • но контейнер остаётся тем же
  • логика навигации всё равно опирается на ul

Это означает, что даже при полной замене шаблона элементов:

  • ul остаётся стабильной точкой привязки
  • события продолжают делегироваться через него
Оглавление