Инициализация через JavaScript

Awesomplete подключается к существующему текстовому полю и превращает его в автодополняемый компонент через прямую инициализацию в JavaScript. Библиотека не требует сложной конфигурации и работает поверх стандартного <input> или <textarea>, расширяя его поведение за счёт привязки экземпляра к DOM-элементу.

Основной способ запуска заключается в создании экземпляра Awesomplete и передаче ему DOM-узла:

<input id="city" type="text" />
var input = document.getElementById("city");

new Awesomplete(input);

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

Инициализация с источником данных

Наиболее распространённый сценарий — передача массива значений через опцию list. Источник может быть задан как статический массив строк:

var input = document.getElementById("city");

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

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

Допустим также вариант с массивом объектов, если требуется разделение отображаемого текста и значения:

new Awesomplete(input, {
    list: [
        { label: "Almaty, Kazakhstan", value: "almaty" },
        { label: "Astana, Kazakhstan", value: "astana" }
    ]
});

label используется для отображения, value — для подстановки в поле ввода.

Привязка через атрибуты и JavaScript одновременно

Инициализация может комбинировать HTML-атрибут data-list и JavaScript-конфигурацию. В этом случае базовый список задаётся в разметке:

<input id="city" data-list="Almaty, Astana, Karaganda" />
var input = document.getElementById("city");

new Awesomplete(input, {
    minChars: 1
});

Значения из data-list автоматически интерпретируются как источник данных, если не переопределены в параметрах конструктора.

Настройка параметров при инициализации

Конструктор принимает второй аргумент с конфигурацией, позволяющей управлять поведением компонента:

new Awesomplete(input, {
    minChars: 2,
    maxItems: 5,
    autoFirst: true
});

Ключевые параметры:

  • minChars — минимальное количество символов до появления списка;
  • maxItems — максимальное число отображаемых предложений;
  • autoFirst — автоматическое выделение первого элемента списка.

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

Динамическая инициализация

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

fetch("/api/cities")
    .then(res => res.json())
    .then(data => {
        new Awesomplete(input, {
            list: data
        });
    });

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

Повторная инициализация и управление экземпляром

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

var awesompleteInstance = new Awesomplete(input, {
    list: ["Almaty", "Astana"]
});

Это позволяет обращаться к методам экземпляра, включая обновление списка:

awesompleteInstance.list = ["Karaganda", "Shymkent"];

Изменение свойства list приводит к обновлению доступных предложений без повторного создания объекта.

Инициализация нескольких полей

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

var cityInput = new Awesomplete(document.getElementById("city"), {
    list: ["Almaty", "Astana"]
});

var countryInput = new Awesomplete(document.getElementById("country"), {
    list: ["Kazakhstan", "Russia", "China"]
});

Каждый экземпляр работает изолированно и не влияет на другие элементы интерфейса.

Программная инициализация через функцию-обёртку

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

function initAwesomplete(selector, list) {
    var input = document.querySelector(selector);

    return new Awesomplete(input, {
        list: list,
        minChars: 1,
        maxItems: 10
    });
}

initAwesomplete("#city", ["Almaty", "Astana"]);
initAwesomplete("#country", ["Kazakhstan", "Russia"]);

Такой подход упрощает масштабирование и унифицирует поведение всех полей автодополнения.

Контроль поведения после инициализации

После создания экземпляра возможно программное управление состоянием:

var aw = new Awesomplete(input, {
    list: ["Almaty", "Astana"]
});

aw.open();
aw.close();
aw.evaluate();

Методы позволяют вручную открывать список, закрывать его или пересчитывать результаты фильтрации в зависимости от текущего значения поля.

Условная инициализация

Инициализация может зависеть от состояния DOM или данных:

var input = document.getElementById("city");

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

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

Оглавление