Инициализация через data-атрибуты

Awesomplete поддерживает инициализацию без явного вызова new Awesomplete(...) в JavaScript-коде. В этом режиме вся конфигурация задаётся через HTML-атрибуты, а библиотека автоматически сканирует DOM и активирует элементы при загрузке.

Ключевым механизмом выступает атрибут class="awesomplete" и набор data-* параметров, определяющих поведение автодополнения.

<input class="awesomplete" data-list="JavaScript, TypeScript, Python, Ruby, Go">

После подключения библиотеки такой элемент автоматически получает функциональность автодополнения без дополнительного JS-кода.

Источник данных через data-list

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

Строковый список

<input class="awesomplete"
       data-list="Apple, Banana, Cherry, Orange">

Элементы разделяются запятыми. Пробелы после разделителя игнорируются.

JSON-массив

<input class="awesomplete"
       data-list='["React", "Vue", "Svelte", "Angular"]'>

JSON-формат используется при необходимости точного контроля над значениями, включая строки с запятыми или спецсимволами.

Значения с метками

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

<input class="awesomplete"
       data-list='[{"label":"United States","value":"US"},{"label":"Germany","value":"DE"}]'>

В этом случае в списке отображается label, а при выборе подставляется value.

Настройка поведения через data-атрибуты

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

Минимальное количество символов

<input class="awesomplete"
       data-list="JavaScript, Java, Python"
       data-minchars="2">

Параметр data-minchars задаёт минимальное число символов, после которого начинается поиск совпадений. Значение по умолчанию — 1.

Максимальное количество отображаемых элементов

<input class="awesomplete"
       data-list="HTML, CSS, JS, TS, Node, Deno"
       data-maxitems="4">

data-maxitems ограничивает количество элементов в выпадающем списке.

Автовыбор первого элемента

<input class="awesomplete"
       data-list="React, Vue, Angular"
       data-autofirst="true">

При включённом data-autofirst первый элемент списка автоматически подсвечивается и может быть выбран клавишей Enter без дополнительной навигации.

Фильтрация и сортировка

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

<input class="awesomplete"
       data-list="Berlin, Bern, Brussels, Barcelona"
       data-sort="false">
  • data-sort="false" отключает сортировку результатов
  • по умолчанию результаты сортируются по релевантности

Фильтрация при этом остаётся активной, но может быть переопределена кастомными механизмами при расширенной интеграции.

Автоматическая инициализация при загрузке DOM

При подключении скрипта Awesomplete выполняется сканирование документа на элементы с классом awesomplete. Для каждого найденного элемента создаётся экземпляр компонента и считываются атрибуты конфигурации.

Типичный порядок обработки:

  1. Поиск элементов input.awesomplete
  2. Чтение data-list
  3. Парсинг дополнительных data-* параметров
  4. Создание экземпляра автодополнения
  5. Привязка событий ввода и клавиатуры

Комбинирование нескольких параметров в одном элементе

Все data-* атрибуты могут использоваться одновременно, формируя полную конфигурацию без JavaScript-кода.

<input class="awesomplete"
       data-list='["Copenhagen","Oslo","Helsinki","Stockholm","Reykjavik"]'
       data-minchars="1"
       data-maxitems="3"
       data-autofirst="true"
       data-sort="true">

В таком варианте полностью определяется поведение компонента: источник данных, порог активации, количество результатов и логика выбора.

Особенности парсинга data-list

При использовании строкового формата список разбивается по запятой, поэтому важно учитывать ограничения:

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

Для сложных структур предпочтителен JSON-формат, обеспечивающий корректную обработку вложенных данных и специальных символов.

Поведение при изменении data-атрибутов

Изменение data-* атрибутов после инициализации не всегда приводит к автоматическому обновлению состояния компонента. В большинстве случаев требуется либо повторная инициализация, либо ручное обновление экземпляра через API Awesomplete.

При динамическом управлении списками чаще используется программный способ создания экземпляра, но HTML-инициализация остаётся удобной для статических или полу-статических интерфейсов.

Встраивание нескольких полей на странице

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

<input class="awesomplete" data-list="Red, Green, Blue">
<input class="awesomplete" data-list="One, Two, Three">
<input class="awesomplete" data-list="Dog, Cat, Bird">

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

Оглавление