Обязательные поля

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

Инициализация выполняется через конструктор:

new Awesomplete(input, options);

где input — DOM-элемент текстового поля, а options — объект конфигурации. Отсутствие любого из ключевых обязательных компонентов приводит к невозможности построения списка подсказок.

Обязательное поле input

Роль элемента ввода

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

Минимально допустимая структура:

<input id="city" />
const input = document.querySelector("#city");
new Awesomplete(input, {
    list: ["London", "Paris", "Berlin"]
});

Требования к input

Ключевые требования:

  • элемент должен быть совместим с текстовым вводом (input[type="text"], search, либо textarea);
  • элемент обязан присутствовать в DOM до инициализации;
  • поле должно поддерживать событие input, так как именно оно триггерит обновление списка.

Отсутствие валидного input приводит к невозможности привязки поведения библиотеки, поскольку Awesomplete не имеет внутреннего механизма создания UI.

Обязательное поле list

Источник данных как ядро логики

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

Минимальный вариант:

new Awesomplete(input, {
    list: ["Apple", "Apricot", "Banana"]
});

Форматы данных list

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

  1. Массив строк
list: ["One", "Two", "Three"]
  1. Массив объектов
list: [
    { label: "Alaska", value: "AK" },
    { label: "California", value: "CA" }
]
  1. HTML-источник через data-* атрибут
<input id="country" data-list="USA,Canada,Mexico" />

Требования к list

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

При отсутствии list библиотека не выполняет поиск и не формирует выпадающее меню.

Обязательная связка input + list

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

  • input определяет точку ввода;
  • list определяет пространство поиска.

Эта связка формирует базовый цикл:

  1. ввод символов;
  2. фильтрация list;
  3. отображение совпадений;
  4. выбор значения и вставка в input.

Отсутствие одного из элементов нарушает весь цикл.

Обязательные внутренние зависимости и DOM-структура

Автоматически создаваемые элементы

Хотя Awesomplete генерирует интерфейс самостоятельно, он требует корректного DOM-контекста:

  • контейнер выпадающего списка создается автоматически;
  • элементы <ul> и <li> формируются динамически;
  • привязка осуществляется к input.parentNode.

Если input не имеет родительского узла в DOM, построение интерфейса становится невозможным.

Минимальный набор конфигурации для запуска

Фактически, библиотека может работать в самом базовом виде без дополнительных настроек:

new Awesomplete(input, {
    list: []
});

Однако такая конфигурация не имеет практического смысла. Рабочий минимум предполагает наличие хотя бы одного значения в list.

Оптимальный минимальный вариант:

new Awesomplete(input, {
    list: ["A", "B", "C"]
});

Поведение при отсутствии обязательных полей

Отсутствие input

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

Отсутствие list

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

Пустой list

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

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

Алгоритм поиска Awesomplete основан на сравнении введенной строки с элементами list. Это означает, что структура обязательных данных влияет на поведение системы:

  • строки сравниваются по подстроке;
  • объекты используют label для отображения и value для вставки;
  • несовпадающие типы приводят к некорректной фильтрации.

Без корректного list этот алгоритм не может быть запущен, даже при наличии input.

Минимальная архитектура работы библиотеки

Функционирование Awesomplete можно свести к обязательной архитектурной схеме:

  • DOM-элемент input;
  • массив или источник list;
  • обработчик событий ввода;
  • механизм фильтрации;
  • генерация выпадающего списка.

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

Оглавление