Свойство input

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

Свойство input хранит ссылку на HTMLInputElement, к которому подключён экземпляр Awesomplete. Это не абстрактное значение, а прямой объект DOM, с которым библиотека работает в реальном времени.

При создании экземпляра:

const input = document.querySelector("#city");
const aw = new Awesomplete(input);

внутри объекта aw автоматически формируется связь:

aw.input === input; // true

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

Тип и структура

С точки зрения реализации, input — это обычный DOM-объект:

  • HTMLInputElement
  • либо элемент, совместимый с текстовым вводом (textarea в некоторых расширениях)

Библиотека не хранит копию значения, а всегда опирается на текущее состояние поля:

aw.input.value

Таким образом, любое взаимодействие с автодополнением фактически отражается на реальном DOM-элементе.

Внутреннее использование input

Awesomplete активно использует input для нескольких критических задач:

1. Отслеживание событий ввода

На input навешиваются обработчики событий:

  • input — изменение текста
  • keydown — навигация по списку
  • blur — скрытие списка
  • focus — возможный запуск подсказок

Пример внутренней логики:

this.input.addEventListener("input", this.evaluate.bind(this));

Именно через это свойство библиотека реагирует на каждое изменение строки.

2. Получение текущего значения

Фильтрация списка всегда выполняется на основе:

this.input.value

Это значение передаётся в функцию фильтрации:

this.filter(item, this.input.value)

3. Управление выбором значения

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

this.input.value = selectedValue;

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

Изменение input в рантайме

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

Пример замены:

aw.input = document.querySelector("#new-input");

При такой операции возникают типичные проблемы:

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

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

aw = new Awesomplete(newInput);

Взаимодействие input с другими свойствами

Свойство input тесно связано с другими внутренними частями Awesomplete:

list

  • данные фильтруются на основе input.value

ul (контейнер списка)

  • позиционируется относительно input

selected

  • при выборе элемента результат записывается в input.value

opened

  • состояние отображения списка зависит от активности input

Привязка событий через input

Через input можно подключать дополнительную логику, расширяющую поведение автодополнения:

aw.input.addEventListener("input", () => {
    console.log("Текущее значение:", aw.input.value);
});

Однако важно учитывать, что Awesomplete уже использует этот же поток событий, и вмешательство должно учитывать порядок выполнения обработчиков.

Особенности фокуса и жизненного цикла

Поведение input напрямую влияет на жизненный цикл списка:

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

Если элемент удаляется из DOM, ссылка в aw.input остаётся, что может приводить к утечкам памяти при сохранении экземпляра.

Типичные ошибки при работе с input

1. Замена input без пересоздания Awesomplete

aw.input = newInput;

Результат — неконсистентное состояние событий.

2. Использование не-input элемента

Передача div или другого неподходящего элемента приводит к отсутствию value и поломке логики.

3. Прямое изменение value без учета evaluate

aw.input.value = "text";

Без вызова evaluate() список не обновляется автоматически.

Роль input в архитектуре Awesomplete

С архитектурной точки зрения input является центральной точкой управления состоянием:

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

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

Оглавление