Стандартное поведение

Awesomplete строится вокруг простой модели: входное текстовое поле и набор данных, из которых формируются подсказки. Стандартное поведение начинается с момента подключения экземпляра к DOM-элементу input.

<input id="city" />
const input = document.getElementById("city");

new Awesomplete(input, {
    list: ["Almaty", "Astana", "Karaganda", "Shymkent"]
});

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

Механизм активации выпадающего списка

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

События, на которые реагирует библиотека:

  • input — основной триггер обновления списка
  • focus — потенциальное открытие списка при наличии данных
  • keydown — управление навигацией

При каждом изменении значения поля выполняется пересчёт подходящих элементов списка.

Фильтрация элементов списка

Фильтрация выполняется по префиксному совпадению. Стандартный алгоритм поведения:

  1. Получение текущего значения input
  2. Приведение к нормализованному виду (обычно без учёта регистра)
  3. Сравнение начала строки каждого элемента списка с введённым значением

Пример:

["Almaty", "Astana", "Atyrau"]

При вводе A будут показаны все элементы. При вводе At останется только Astana и Atyrau.

Ключевая особенность стандартного поведения — приоритет начального совпадения, а не вхождения подстроки.

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

После фильтрации формируется выпадающий список. Структура DOM создаётся автоматически и включает:

  • контейнер списка
  • элементы <li> для каждого совпадения
  • выделение активного элемента

Стандартный рендер не требует кастомизации и использует минимальную разметку:

<ul class="awesomplete">
  <li>Astana</li>
  <li>Almaty</li>
</ul>

Отображение списка происходит динамически, только при наличии результатов.

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

Стандартное поведение ограничивает число отображаемых подсказок для предотвращения перегрузки интерфейса. По умолчанию используется ограничение maxItems, которое влияет на:

  • количество видимых строк
  • прокрутку списка
  • приоритет верхних совпадений

При превышении лимита остальные элементы отсекаются после фильтрации.

Навигация с клавиатуры

Стандартная модель взаимодействия включает поддержку клавиш:

  • ↓ — переход к следующему элементу
  • ↑ — переход к предыдущему элементу
  • Enter — выбор текущего элемента
  • Esc — закрытие списка

Поведение реализовано через управление индексом активного элемента. При достижении конца списка навигация либо останавливается, либо циклически возвращается в начало (в зависимости от конфигурации, но стандартно — без циклирования).

Выбор значения и вставка в input

При выборе элемента выполняется автоматическая подстановка значения в поле ввода. Процесс включает:

  1. Захват текста выбранного элемента
  2. Очистку текущего значения input
  3. Вставку выбранного значения
  4. Закрытие списка
input.value = selectedValue;

Дополнительно триггерится событие изменения, что позволяет интеграции с формами реагировать на выбор.

Поведение при потере фокуса

При уходе фокуса с поля ввода список подсказок закрывается. Стандартное поведение:

  • скрытие dropdown
  • сброс активного индекса
  • сохранение текущего значения input без изменений

Если элемент был выбран, значение остаётся фиксированным. Если выбор не был сделан, введённый текст сохраняется как есть.

Режим автоподбора при клике

При клике по элементу списка происходит идентичная логика выбора, как при нажатии Enter. Дополнительно:

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

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

Регистронезависимость и нормализация

Стандартная фильтрация выполняется без учёта регистра. Это означает:

  • Almaty == almaty == ALMATY

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

Обработка пустого ввода

При пустом значении input стандартное поведение зависит от условий:

  • список может не отображаться
  • либо показывается полный набор элементов (в зависимости от настроек и минимального порога символов)

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

Состояния компонента

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

  • idle — ожидание ввода
  • filtering — пересчёт списка
  • open — отображение подсказок
  • navigating — перемещение по элементам
  • selected — фиксация значения

Переходы между состояниями происходят автоматически на основе событий DOM.

Синхронизация с внешними изменениями input

Если значение input изменяется программно, компонент реагирует следующим образом:

  • при изменении через JS вызывается пересчёт списка
  • при отсутствии триггера событий список может не обновиться до следующего input

Это важно для интеграции с формами, где значение может устанавливаться извне.

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

В стандартной конфигурации система работает по принципу минимального вмешательства:

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

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

Управление жизненным циклом списка

Список создаётся динамически при первом открытии и может пересоздаваться при каждом изменении данных. В стандартном режиме:

  • DOM не перегружается полностью
  • обновляются только элементы списка
  • сохраняется текущий input state

Такой подход снижает количество операций с DOM и обеспечивает стабильную работу даже при больших списках.

Оглавление