Структура HTML разметки

Основой работы Awesomplete выступает обычный элемент формы <input>, к которому библиотека динамически добавляет список подсказок. Минимальная разметка не требует дополнительных контейнеров — достаточно корректно подготовленного поля ввода.

<input class="awesomplete" id="city" type="text" />

Ключевой момент — класс awesomplete. Именно он используется библиотекой для автоматической инициализации поведения автодополнения при подключении скрипта.

Связь input с источником данных через атрибут data-list

Самый простой способ задать список подсказок — использовать атрибут data-list. Он содержит значения, разделённые запятыми.

<input class="awesomplete" 
       id="country"
       type="text"
       data-list="Kazakhstan, Russia, China, Germany, France" />

При вводе текста библиотека сравнивает введённую строку с элементами списка и отображает подходящие совпадения.

Особенность этого подхода заключается в том, что данные полностью статичны и находятся прямо в HTML, без JavaScript-инициализации массива.

Использование связанного списка datalist

Awesomplete может работать совместно с нативным HTML-элементом <datalist>, что удобно при отделении данных от input-поля.

<input class="awesomplete" id="language" list="langs" />

<datalist id="langs">
    <option value="JavaScript"></option>
    <option value="TypeScript"></option>
    <option value="Python"></option>
    <option value="Go"></option>
</datalist>

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

Внутренняя HTML-структура, создаваемая библиотекой

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

<div class="awesomplete">
    <input />
    <ul>
        <li>Первый вариант</li>
        <li>Второй вариант</li>
    </ul>
</div>

Фактически библиотека оборачивает исходный <input> в контейнер и создаёт список <ul> для отображения вариантов.

Роль класса awesomplete

Класс awesomplete выполняет две функции:

  1. Служит маркером для автоматической инициализации.
  2. Определяет область, в которой библиотека управляет DOM-структурой.

Если класс отсутствует, автодополнение не будет активировано автоматически, и потребуется ручная инициализация через JavaScript.

Минимальная структура без data-list и datalist

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

<input id="search" type="text" class="awesomplete" />

В этом случае список формируется исключительно через Jav * aScript:

new Awesomplete(document.querySelector("#search"), {
    list: ["Apple", "Apricot", "Banana", "Blueberry"]
});

HTML остаётся полностью нейтральным, а вся логика вынесена в код.

Контейнеризация и обёртка элемента

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

Особенность:

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

Это позволяет корректно позиционировать dropdown даже при сложной верстке (flex, grid, absolute positioning).

Доступность и ARIA-атрибуты

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

  • aria-autocomplete
  • aria-expanded
  • role="listbox"
  • role="option"

HTML-структура в итоге становится пригодной для клавиатурной навигации без дополнительных усилий со стороны верстки.

Пример итогового input после инициализации:

<input aria-autocomplete="list"
       aria-expanded="false"
       aria-owns="awesomplete_list_1"
       class="awesomplete" />

Работа с несколькими полями ввода

При наличии нескольких input-элементов каждый экземпляр Awesomplete создаёт собственную независимую структуру DOM.

<input class="awesomplete" id="city" />
<input class="awesomplete" id="country" />

Каждое поле получает собственный список <ul> и отдельный контейнер, что исключает пересечение данных и конфликт событий.

Динамическое наполнение структуры

HTML-разметка может быть полностью статичной, но список внутри Awesomplete часто формируется динамически:

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

const aw = new Awesomplete(input);

aw.list = ["HTML", "CSS", "JavaScript", "WebAssembly"];

В этом случае DOM-структура <ul> остаётся одинаковой, но содержимое <li> обновляется в реальном времени.

Взаимодействие разметки с CSS

Хотя HTML-структура создаётся автоматически, её внешний вид полностью зависит от классов:

  • .awesomplete — контейнер
  • .awesomplete > ul — список подсказок
  • .awesomplete > ul > li — отдельный элемент

Базовая стилизация опирается на минимальные правила, но чаще всего разработчики переопределяют их под собственный UI.

.awesomplete ul {
    position: absolute;
    z-index: 1000;
}

.awesomplete li {
    padding: 8px;
    cursor: pointer;
}

Итоговая логика HTML-структуры Awesomplete

Вся структура строится вокруг одного элемента <input>, который превращается в интерактивный компонент за счёт:

  • маркера класса awesomplete
  • источника данных (data-list, datalist или JS-массив)
  • автоматически создаваемого контейнера <div>
  • списка подсказок <ul> с элементами <li>
  • набора ARIA-атрибутов для доступности
Оглавление