Базовые CSS классы

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

Основная идея архитектуры заключается в разделении трёх уровней:

  • контейнер компонента;
  • список предложений;
  • отдельные элементы списка;
  • состояния (активный, выбранный, видимый).

Такой подход позволяет переопределять внешний вид без вмешательства в JavaScript-логику библиотеки.

Контейнер .awesomplete

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

.awesomplete

Этот контейнер создаётся автоматически при инициализации библиотеки и служит основой для позиционирования выпадающего списка.

Типичная роль контейнера:

  • задаёт контекст позиционирования (обычно position: relative);
  • управляет привязкой списка к полю ввода;
  • обеспечивает корректное наложение элементов через z-index.

Пример структуры DOM:

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

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

  • ширины выпадающего списка;
  • общей типографики;
  • отступов относительно input.

Список предложений ul

Внутри контейнера создаётся элемент:

ul (без обязательного дополнительного класса)

Этот список содержит все доступные варианты автодополнения.

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

  • список скрыт по умолчанию;
  • отображается только при наличии результатов;
  • позиционируется абсолютно относительно контейнера .awesomplete.

Часто применяется стилизация через селектор:

.awesomplete > ul

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

Элементы списка li

Каждое предложение автодополнения представлено элементом:

li

Эти элементы генерируются динамически на основе массива данных или результата фильтрации.

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

  • содержат текст подсказки;
  • могут включать HTML-разметку (например, выделение совпадений);
  • реагируют на наведение мыши;
  • поддерживают клавиатурную навигацию.

Типичная стилизация:

.awesomplete li {
  cursor: pointer;
}

Состояние активного элемента .active

Одним из ключевых классов является:

.active

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

Роль состояния .active:

  • визуально выделяет текущий элемент;
  • синхронизируется с внутренним индексом навигации;
  • используется при подтверждении выбора (Enter).

Пример стилизации:

.awesomplete li.active {
  background: #e0e0e0;
  color: #000;
}

Важно, что .active не связан с hover-состоянием напрямую — они могут перекрываться, но логика управляется JavaScript.

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

Список подсказок управляется через комбинацию CSS и атрибутов состояния.

На уровне CSS часто используются:

  • display: none для скрытого состояния;
  • display: block для активного;
  • либо управление через visibility и opacity.

Библиотека также опирается на ARIA-атрибуты:

  • aria-expanded="true|false" на input;
  • aria-hidden на списке (в некоторых реализациях);
  • aria-selected на элементах li.

Типичный подход:

.awesomplete > ul {
  display: none;
}

.awesomplete[aria-expanded="true"] > ul {
  display: block;
}

Такой механизм обеспечивает не только визуальную, но и семантическую синхронизацию состояния.

Взаимодействие с ARIA-атрибутами

Awesomplete активно использует ARIA для доступности интерфейса.

Ключевые связи:

  • input[aria-expanded] отражает открытость списка;
  • li[aria-selected="true"] соответствует активному элементу;
  • список ul может иметь role="listbox";
  • элементы li — role="option".

CSS может учитывать эти состояния напрямую:

.awesomplete li[aria-selected="true"] {
  background: #d0d0ff;
}

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

Стилизация выделения совпадений

Внутри элементов li часто используется разметка для подсветки совпадений (например, <mark> или <strong> в зависимости от конфигурации).

Типичная стилизация:

.awesomplete mark {
  background: yellow;
  color: inherit;
}

Это усиливает визуальное восприятие совпадающих частей строки и не требует изменения логики фильтрации.

Управление позиционированием

Контейнер .awesomplete обычно имеет:

.awesomplete {
  position: relative;
}

А список:

.awesomplete > ul {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
}

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

  • привязку списка к input;
  • наложение поверх других элементов интерфейса;
  • адаптивное расширение по ширине контейнера.

Переопределение базовых классов

Ключевая особенность Awesomplete — минимальная жёсткость CSS. Почти все стили могут быть переопределены.

Основные точки кастомизации:

  • .awesomplete — контейнер;
  • .awesomplete > ul — список;
  • .awesomplete li — элементы;
  • .active — выбранный элемент;
  • [aria-expanded="true"] — состояние открытия.

Пример полной переопределяющей схемы:

.awesomplete > ul {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
}

.awesomplete li {
  padding: 8px 12px;
}

.awesomplete li.active {
  background: #007bff;
  color: white;
}

Темизация через классы

Хотя библиотека не навязывает тему, часто применяются обёртки:

  • .awesomplete.dark
  • .awesomplete.light

или модификации через родительский контейнер:

.dark .awesomplete > ul {
  background: #222;
  color: #fff;
}

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

Типичные ошибки при работе с CSS-классами

Часто встречаются следующие проблемы:

1. Перекрытие z-index Список может оказываться под другими элементами интерфейса из-за отсутствия явного z-index.

2. Сброс position Удаление position: relative у контейнера ломает привязку списка.

3. Конфликт с глобальными стилями ul и li Reset-стили могут неожиданно изменять внешний вид списка.

4. Игнорирование ARIA-состояний Стилизация только через .active без учета [aria-selected] приводит к рассинхронизации состояния и доступности.

5. Слишком агрессивные селекторы Глобальные правила типа ul li {} могут ломать компонент.

Базовая система классов как минимальный UI-фреймворк

Набор CSS-классов Awesomplete формирует компактную, но функционально завершённую систему интерфейса автодополнения. Каждый класс отражает конкретное состояние или структурную роль, а взаимодействие между ними обеспечивает поведение выпадающего списка без дополнительной сложности в JavaScript-слое.

Оглавление