Минимальный рабочий пример

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

Подключение библиотеки

Базовый способ подключения — использование CDN. Достаточно подключить CSS и JavaScript-файл:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.js"></script>

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

Разметка поля ввода

Минимальная HTML-структура состоит из одного input-элемента:

<input id="city" type="text" />

Библиотека работает напрямую с DOM-элементом, не требуя дополнительных обёрток или компонентов.

Инициализация автодополнения

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

<script>
const input = document.getElementById("city");

const cities = [
  "Almaty",
  "Astana",
  "Karaganda",
  "Shymkent",
  "Aktobe",
  "Atyrau"
];

new Awesomplete(input, {
  list: cities
});
</script>

В этом примере массив cities выступает источником подсказок. При вводе текста выполняется фильтрация значений по совпадению с началом строки.

Принцип работы минимальной конфигурации

Поведение по умолчанию включает:

  • фильтрацию списка по введённым символам;
  • отображение выпадающего меню при наличии совпадений;
  • навигацию по списку с клавиатуры (стрелки вверх и вниз);
  • выбор значения через Enter или клик мышью;
  • автоматическую подстановку выбранного значения в input.

Логика фильтрации основана на поиске совпадения подстроки в начале элемента списка, без необходимости дополнительной настройки.

Использование массива как источника данных

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

list: ["JavaScript", "Java", "Python", "PHP", "C#", "C++"]

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

Минимальная кастомизация поведения

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

new Awesomplete(input, {
  list: cities,
  minChars: 1,
  maxItems: 5,
  autoFirst: true
});
  • minChars определяет минимальное количество символов перед показом списка;
  • maxItems ограничивает число отображаемых элементов;
  • autoFirst автоматически выделяет первый элемент списка.

Итоговая минимальная структура

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.css">
</head>
<body>

<input id="city" type="text" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.js"></script>
<script>
const input = document.getElementById("city");

new Awesomplete(input, {
  list: ["Almaty", "Astana", "Karaganda", "Shymkent"]
});
</script>

</body>
</html>
Оглавление