Событие awesomplete-selectcomplete

Событие awesomplete-selectcomplete срабатывает в момент завершённого выбора значения из списка автодополнения и фиксирует финальное состояние ввода после применения выбранного элемента. В экосистеме Awesomplete это одно из ключевых событий, позволяющее отделить процесс навигации по подсказкам от факта окончательного подтверждения выбора.

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

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

Именно финальный шаг — фиксация значения в поле ввода — сопровождается событием awesomplete-selectcomplete.

В отличие от промежуточных событий, это событие фиксирует не намерение пользователя, а уже завершённое действие, которое изменило состояние DOM.

Отличие от awesomplete-select

Важно различать awesomplete-select и awesomplete-selectcomplete.

  • awesomplete-select — возникает в момент, когда пользователь только выбирает элемент (до финального присвоения значения).
  • awesomplete-selectcomplete — возникает после того, как значение уже записано в поле ввода.

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

Если awesomplete-select позволяет отменить выбор через preventDefault(), то awesomplete-selectcomplete уже не предоставляет механизма отмены — состояние считается завершённым.

Сигнатура события и объект события

Событие вызывается на DOM-элементе input, к которому привязан экземпляр Awesomplete.

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

input.addEventListener("awesomplete-selectcomplete", function(event) {
    console.log(event);
});

Часто полезные данные находятся в:

  • event.text — выбранный текст;
  • event.value — итоговое значение, записанное в input;
  • event.target — исходный input-элемент.

В зависимости от версии и расширений библиотеки структура может незначительно варьироваться, но общий смысл сохраняется: событие отражает финальное состояние выбора.

Базовый пример использования

Типовой сценарий использования awesomplete-selectcomplete — синхронизация значения с внешним состоянием приложения.

var input = document.querySelector("#city");

var awesomplete = new Awesomplete(input, {
    list: ["London", "Berlin", "Paris", "Tokyo"]
});

input.addEventListener("awesomplete-selectcomplete", function(event) {
    console.log("Выбрано значение:", input.value);
});

Здесь важно, что обработчик срабатывает уже после того, как input.value гарантированно обновлён.

Использование для нормализации данных

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

input.addEventListener("awesomplete-selectcomplete", function() {
    input.value = input.value.trim().toLowerCase();
});

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

Работа с объектными списками

Awesomplete поддерживает не только строки, но и объекты вида { label, value }. В этом случае событие awesomplete-selectcomplete становится точкой, где можно извлечь структурированные данные.

var input = document.querySelector("#user");

new Awesomplete(input, {
    list: [
        { label: "Ivan Petrov", value: "user_1" },
        { label: "Anna Smirnova", value: "user_2" }
    ]
});

input.addEventListener("awesomplete-selectcomplete", function() {
    console.log("ID пользователя:", input.value);
});

Здесь в поле ввода окажется value, тогда как отображаемая метка была label. Событие фиксирует уже преобразованное значение.

Сценарии интеграции с API

На практике awesomplete-selectcomplete часто используется как триггер для загрузки данных с сервера.

input.addEventListener("awesomplete-selectcomplete", function() {
    fetch(`/api/city?name=${encodeURIComponent(input.value)}`)
        .then(r => r.json())
        .then(data => {
            console.log("Данные города:", data);
        });
});

Такой подход позволяет:

  • минимизировать количество запросов (запрос отправляется только после выбора);
  • исключить обработку промежуточных вводов;
  • работать с гарантированно валидным значением.

Поведение при программной установке значения

Важный аспект: событие awesomplete-selectcomplete обычно связано с пользовательским выбором, а не с прямым изменением input.value в коде.

input.value = "Paris";

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

Использование для аналитики

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

input.addEventListener("awesomplete-selectcomplete", function() {
    analytics.track("autocomplete_select", {
        value: input.value
    });
});

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

Связь с клавиатурной навигацией

Выбор может быть инициирован разными способами:

  • клавиша Enter;
  • клик мышью;
  • тап на мобильном устройстве.

Во всех случаях awesomplete-selectcomplete срабатывает одинаково, что делает его универсальной точкой синхронизации состояния.

Особенности поведения при кастомных источниках списка

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

  • значение может формироваться асинхронно;
  • итоговое input.value может отличаться от исходного объекта.
new Awesomplete(input, {
    list: function(text, callback) {
        fetch(`/search?q=${text}`)
            .then(r => r.json())
            .then(data => callback(data));
    }
});

После выбора элемента awesomplete-selectcomplete фиксирует уже разрешённое значение.

Ошибки интерпретации события

Типичная ошибка — использование awesomplete-selectcomplete как замену input-событию. Это приводит к тому, что:

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

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

Композиция с другими событиями Awesomplete

В реальных интерфейсах событие часто используется вместе с:

  • awesomplete-open — открытие списка;
  • awesomplete-close — закрытие списка;
  • awesomplete-select — предварительный выбор.

Типичный порядок взаимодействия:

  1. open
  2. highlight (внутренне)
  3. select
  4. selectcomplete
  5. close

awesomplete-selectcomplete находится на границе между пользовательским действием и завершённым состоянием компонента.

Поведение при очистке значения

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

input.addEventListener("awesomplete-selectcomplete", function() {
    setTimeout(() => {
        input.value = "";
    }, 1000);
});

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

Роль в архитектуре интерфейсов

В сложных интерфейсах Awesomplete awesomplete-selectcomplete часто становится точкой синхронизации:

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

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

Оглавление