Awesomplete изначально проектировалась как минималистичная и при этом гибкая библиотека автодополнения, где базовый сценарий работы строится вокруг максимально простых структур данных. Наиболее прямолинейный и часто используемый формат источника данных — массив строк, в котором каждая строка является отдельным вариантом подсказки.
При работе с простыми массивами строк библиотека воспринимает каждое значение как готовый элемент списка автодополнения. Никаких дополнительных метаданных, объектов или конфигурационных структур не требуется: строка одновременно выступает и отображаемым текстом, и значением выбора.
В основе механизма лежит принцип прямого сопоставления пользовательского ввода с набором строк:
const input = document.querySelector("#city");
new Awesomplete(input, {
list: ["Amsterdam", "Athens", "Auckland", "Berlin", "Brussels", "Copenhagen"]
});В этом примере массив содержит исключительно строки. Каждая строка
становится потенциальным вариантом подсказки. При вводе символов в поле
input библиотека выполняет фильтрацию этого массива и
отображает только те элементы, которые соответствуют текущему вводу.
Ключевая особенность такого подхода заключается в том, что структура данных не требует преобразования: библиотека сама обрабатывает массив и выполняет поиск по подстроке.
При использовании простых строковых массивов применяется стандартный алгоритм сопоставления:
Например, при списке:
["Berlin", "Bern", "Helsinki", "Hamburg"]ввод ber вернёт:
Ввод ham вернёт:
Это поведение делает базовую конфигурацию универсальной для большинства задач автодополнения без необходимости дополнительной настройки.
Простейший сценарий допускает передачу массива без каких-либо дополнительных опций:
new Awesomplete(document.querySelector("#country"), [
"Kazakhstan",
"Kyrgyzstan",
"Uzbekistan",
"Tajikistan",
"Turkmenistan"
]);В таком случае массив автоматически интерпретируется как список
подсказок. Однако более явный способ — использование параметра
list, который повышает читаемость и расширяемость
конфигурации:
new Awesomplete(document.querySelector("#country"), {
list: [
"Kazakhstan",
"Kyrgyzstan",
"Uzbekistan",
"Tajikistan",
"Turkmenistan"
]
});Второй вариант предпочтителен в проектах среднего и крупного масштаба, так как позволяет добавлять дополнительные настройки без изменения структуры вызова.
Массив строк может формироваться программно, что особенно важно при работе с внешними источниками данных:
const rawData = ["Apple", "Apricot", "Avocado", "Banana", "Blueberry"];
const filteredData = rawData.filter(item => item.length > 5);
new Awesomplete(document.querySelector("#fruit"), {
list: filteredData
});Здесь предварительная обработка массива выполняется средствами JavaScript, а библиотека получает уже готовый набор строк. Такой подход разгружает логику интерфейса и позволяет контролировать состав подсказок до передачи их в компонент.
При использовании строковых массивов важно учитывать, что совпадение не ограничивается началом строки. Это приводит к следующим сценариям:
["JavaScript", "TypeScript", "CoffeeScript"]Ввод script вернёт все три элемента, поскольку подстрока
присутствует в каждом значении.
Ввод java вернёт:
Такое поведение удобно для широкого поиска, но может быть избыточным в случаях, когда требуется строгое префиксное совпадение. В подобных ситуациях логика фильтрации должна быть расширена на уровне конфигурации или предварительной обработки массива.
При работе с простыми строками часто возникает необходимость нормализации:
Пример подготовки массива:
const cities = [
" Almaty",
"Astana ",
" shymkent",
"Karagandy"
];
const normalized = cities.map(city => city.trim());
new Awesomplete(document.querySelector("#city"), {
list: normalized
});После нормализации данные становятся предсказуемыми для поиска, а вероятность некорректных совпадений снижается.
Строковые массивы особенно эффективны в сценариях, где набор значений фиксирован:
Пример со списком языков:
const languages = [
"JavaScript",
"Python",
"Java",
"C++",
"Go",
"Rust",
"PHP"
];
new Awesomplete(document.querySelector("#lang"), {
list: languages
});Такой подход обеспечивает мгновенную работу без задержек, поскольку отсутствуют асинхронные операции и сложная обработка данных.
Несмотря на удобство, использование только строк накладывает ряд ограничений:
Например, если требуется отображать “Moscow” для пользователя, но сохранять код “RU-MOW”, строковый массив становится недостаточным, и требуется переход к объектной структуре.
Порядок подсказок в массиве напрямую влияет на отображение. Библиотека не переупорядочивает список глобально, а лишь фильтрует его. Поэтому приоритет элементов задаётся самим массивом:
const priorities = [
"React",
"Vue",
"Angular",
"Svelte"
];Если пользователь часто вводит схожие запросы, можно вручную размещать наиболее важные элементы выше, обеспечивая их первоочередное отображение.
При пустом значении поля ввода библиотека может показывать весь список или не показывать ничего — это зависит от конфигурации. В базовом сценарии массив строк остаётся доступным как полный набор данных, но отображение активируется только при вводе символов.
new Awesomplete(document.querySelector("#search"), {
list: ["HTML", "CSS", "JavaScript"]
});При первом символе начинается фильтрация, при полном удалении ввода список скрывается.
Даже при увеличении количества элементов до нескольких тысяч строк подход остаётся применимым, однако возрастает нагрузка на фильтрацию. В таких случаях целесообразно:
Пример ограничения:
const limited = bigArray.slice(0, 100);
new Awesomplete(input, {
list: limited
});Использование строковых массивов формирует базовый уровень архитектуры автодополнения: данные остаются плоскими, предсказуемыми и легко управляемыми. Это делает их оптимальным выбором для начальной интеграции и прототипирования интерфейсов, где сложная логика избыточна.
Такая модель данных обеспечивает прямую связь между источником и отображением без промежуточных трансформаций, что снижает вероятность ошибок и упрощает поддержку кода.