Структура HTML элементов

Структура HTML-элементов в Awesomplete строится вокруг минимального набора узлов, которые библиотека динамически расширяет во время работы. Базовая идея заключается в том, что разработчик предоставляет только поле ввода, а остальные элементы создаются и управляются автоматически.

Ключевым элементом выступает:

<input class="awesomplete" />

или вариант с явной инициализацией:

<input id="search" />
new Awesomplete("#search", {
    list: ["JavaScript", "Java", "Python"]
});

Сам HTML минимален, однако после инициализации структура DOM значительно расширяется.

Базовая обёртка компонента

После подключения и активации Awesomplete оборачивает исходный input в дополнительный контейнер:

<span class="awesomplete">
    <input id="search" autocomplete="off" />
</span>

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

  • <span class="awesomplete"> создаётся динамически
  • оригинальный <input> остаётся в DOM без замены
  • библиотека работает через обёртку, а не через подмену элемента

Такой подход позволяет сохранять совместимость с формами и не нарушать стандартное поведение input.

Поле ввода (input) как центральный элемент

Внутри структуры Awesomplete именно input остаётся источником данных и событий.

Основные особенности input:

<input id="search"
       autocomplete="off"
       aria-autocomplete="list"
       aria-expanded="false"
       aria-owns="awesomplete_list_1" />

Добавляемые атрибуты:

  • autocomplete="off" — отключение браузерных подсказок
  • aria-autocomplete="list" — доступность для assistive-технологий
  • aria-expanded — состояние раскрытия списка
  • aria-owns — связь с выпадающим списком

Эти атрибуты управляются автоматически и изменяются в зависимости от состояния списка.

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

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

<ul id="awesomplete_list_1"
    role="listbox"
    hidden>
</ul>

В Awesomplete этот элемент создаётся динамически и управляется внутренним механизмом.

Основные характеристики UL:

  • создаётся один список на инстанс компонента
  • скрыт по умолчанию через hidden
  • отображается при наличии результатов
  • связан с input через aria-owns

Элементы списка (LI)

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

<ul id="awesomplete_list_1" role="listbox">
    <li role="option" aria-selected="false">JavaScript</li>
    <li role="option" aria-selected="false">Java</li>
    <li role="option" aria-selected="false">Python</li>
</ul>

Структурные особенности LI в Awesomplete:

  • role="option" обозначает элемент выбора
  • aria-selected управляет состоянием выделения
  • порядок соответствует массиву list

Активный элемент списка

При навигации клавиатурой изменяется состояние:

<li role="option" aria-selected="true">JavaScript</li>

Поведение:

  • только один элемент может быть aria-selected="true"
  • изменение происходит при стрелках вверх/вниз
  • визуальное выделение синхронизируется с состоянием

Связь DOM-элементов через ARIA

Структура Awesomplete опирается на ARIA-атрибуты для построения связей:

Основные связи:

  • aria-owns (input → list)
  • role="listbox" (контейнер)
  • role="option" (элементы списка)
  • aria-expanded (состояние раскрытия)

Эти атрибуты обеспечивают:

  • доступность
  • корректную работу screen reader
  • семантическую связь элементов

Динамическое управление DOM

Awesomplete не создаёт фиксированную HTML-структуру заранее. Вместо этого:

  1. input остаётся статическим
  2. wrapper создаётся при инициализации
  3. list (ul) создаётся лениво
  4. items (li) пересоздаются при каждом обновлении

Пример состояния до взаимодействия:

<span class="awesomplete">
    <input id="search" />
</span>

После ввода текста:

<span class="awesomplete">
    <input id="search" aria-expanded="true" aria-owns="awesomplete_list_1" />
    <ul id="awesomplete_list_1" role="listbox">
        <li role="option">Result 1</li>
        <li role="option">Result 2</li>
    </ul>
</span>

Классы CSS, используемые библиотекой

Структура классов в Awesomplete задаёт визуальное и функциональное поведение:

  • awesomplete — корневой контейнер
  • awesomplete [hidden] — скрытие списка
  • awesomplete > ul — список
  • awesomplete > ul > li — элементы подсказок

Дополнительные классы:

  • mark — подсветка совпадающих символов
  • active — активный элемент (в некоторых конфигурациях)

Подсветка совпадений внутри элементов

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

<li role="option">
    <mark>Ja</mark>vaScript
</li>

Механизм в Awesomplete:

  • совпадающие части оборачиваются в <mark>
  • разметка генерируется на лету
  • применяется к каждому элементу списка

Состояния видимости списка

Список управляется через атрибут hidden:

<ul hidden></ul>

И активное состояние:

<ul></ul>

Изменения в Awesomplete происходят автоматически при:

  • вводе текста
  • наличии результатов
  • навигации клавиатурой
  • потере фокуса input

Минимальная итоговая DOM-модель

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

<span class="awesomplete">
    <input aria-expanded="true" aria-owns="awesomplete_list_1" />
    <ul id="awesomplete_list_1" role="listbox">
        <li role="option" aria-selected="true">Item 1</li>
        <li role="option" aria-selected="false">Item 2</li>
    </ul>
</span>

Эта модель отражает полный цикл работы Awesomplete: от ввода данных до выбора элемента из списка.

Оглавление