Программная отправка

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

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

  • список предложений;
  • текущий активный индекс;
  • состояние открытого списка;
  • ссылку на input-элемент.

Программная отправка обычно включает три шага:

  1. Установка значения в поле ввода
  2. Синхронизация состояния автодополнения
  3. Инициирование логики отправки формы или пользовательского события

Установка значения без пользовательского выбора

Наиболее прямой способ — присвоение значения input:

input.value = "Москва";

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

Для корректного обновления часто требуется имитация событий:

input.value = "Москва";
input.dispatchEvent(new Event("input"));

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

Программный выбор элемента из списка

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

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

awesompleteInstance.select(item);

где item — объект из массива list.

Чаще используется выбор по индексу через текущий список:

awesompleteInstance.goto(0);
awesompleteInstance.select();

Такой сценарий имитирует навигацию клавишами и подтверждение выбора.

Автоматическая подстановка первого подходящего значения

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

const instance = new Awesomplete(input, {
    list: ["Москва", "Минск", "Алматы"]
});

input.addEventListener("input", () => {
    const list = instance._list || [];
    if (list.length > 0) {
        instance.goto(0);
    }
});

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

instance.select();

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

Закрытие списка перед отправкой

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

instance.close();

Внутреннее состояние Awesomplete при этом очищает активный индекс и скрывает меню.

Связь с отправкой формы

Программная отправка обычно выполняется через form.submit() после установки значения:

input.value = "Алматы";
input.dispatchEvent(new Event("input"));

instance.close();

form.submit();

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

Сценарий «выбор по условию»

Часто требуется выбрать элемент по логике, а не по индексу:

const target = "Минск";

const match = instance._list.find(item => item === target);

if (match) {
    input.value = match;
    input.dispatchEvent(new Event("input"));
    instance.close();
    form.submit();
}

В рамках Awesomplete такой подход позволяет полностью обойти UI-слой и работать напрямую с данными.

Интеграция с кастомной логикой фильтрации

Если список формируется динамически, программная отправка должна учитывать момент обновления данных:

instance.list = fetchData();

input.value = instance.list[0];
input.dispatchEvent(new Event("input"));

instance.select();
instance.close();
form.submit();

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

Использование replace-подобного поведения

Хотя Awesomplete не требует обязательного использования специальных API для замены значения, поведение можно стандартизировать через единый метод:

function setAndSubmit(value) {
    input.value = value;
    input.dispatchEvent(new Event("input"));
    instance.close();
    form.submit();
}

Такой подход исключает рассинхронизацию состояния UI и данных формы.

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

Для максимальной совместимости с внутренними обработчиками автодополнения применяется цепочка событий:

input.value = "Ташкент";

input.dispatchEvent(new Event("input"));
input.dispatchEvent(new Event("change"));

instance.goto(0);
instance.select();

instance.close();
form.submit();

Подобная последовательность полностью повторяет путь: ввод → выбор → подтверждение → отправка.

Обработка нестандартных кейсов

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

if (!instance.suggestions || instance.suggestions.length === 0) {
    return;
}

instance.goto(0);
instance.select();
instance.close();
form.submit();

Это предотвращает отправку некорректных или пустых значений при работе с Awesomplete.

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

При использовании state-менеджеров или реактивных моделей важно поддерживать единый источник данных:

state.value = input.value;

input.addEventListener("input", () => {
    state.value = input.value;
});

После программного выбора:

state.value = selectedValue;
instance.close();
form.submit();

Это обеспечивает согласованность между UI и логикой приложения.

Оглавление