Автокомплит Autocomplete

Поле ввода с подсказками на чистом JavaScript

Пример

Автокомплит списка городов

Город

Установка

1. Подключите JS и CSS файлы

Собранные и минифицированные файлы содержатся в папке dist/ в GitHub репозитории. Скопируйте содержимое папки в ваш проект. Sass и исходные JS файлы содержатся в папке src/, но перед использованием их необходимо собрать.

Вставьте данные строчки кода в ваш HTML

<link rel="stylesheet" href="path/to/autocomplete.min.css">
<script src="path/to/autocomplete.min.js"></script>

CSS рекомендуется вставлять в <head>, а JS перед </body>

2. Вставьте HTML

<div class="autocomplete-wrapper">
    <input id="city" type="text" class="autocomplete" placeholder="Начните вводить код или название">
</div>

3. Инициализируйте JS

var options = {
    source: 'kladr.json',
    displayedProperty: 'City',
    wordEndings: ['города','городов'],
};

Autocomplete('.autocomplete', options);

Первый аргумент – селектор (String) или объект Element
Второй аргумент – опции (Object)

Опции

Автокомплит имеет разные настройки, которые можно передать в конструктор при инициализации

Опция	Значения	По умолчанию	Описание
source (обязательная)	String, function или массив объектов (в частности, массив строк)	null	Ссылка на источник данных в формате JSON или массив. Если это массив строк, опция displayedProperty игнорируется. Функция принимает первым аргументом строку запроса и должна возвращать адрес источника данных.
arrow	true, false	false	Если true, автокомплит со стрелкой, иначе без
displayedProperty	String	value	Свойство объекта, значение которого будет отображаться в выпадающем списке
wordEndings	Array(2)	null	Слова в родительном падеже (обозначают сущность поиска). Например, ['города','городов'].
dropdownPosition	top, bottom, auto	auto	Определяет, с какой стороны от поля ввода появится выпадающий список: сверху или снизу. Если установлено auto, положение будет определяться автоматически.
caseSensitive	true, false	false	Искать с учетом регистра или без (все строки приводятся к нижнему регистру)
searchByEntry	true, false	false	Включает поиск по вхождению
sort	true, false	false	Если true - список сортируется
sortBy	String	displayedProperty	Свойство объекта, по которому идёт сортировка
sortOrder	asc, desc	asc	Определяет порядок сортировки
isValidElement	function	всегда true	Функция для фильтрации некорректных значений. Должна возвращать false, если передаваемый объект не должен участовать в поиске
ownValue	true, false	false	Если true, разрешается указывать свое значение, при этом выводится предупреждение
minHeight	Number	200	Минимальная высота, в которую будет может уместиться выпадающий список. Если снизу столько пространства нет - список покажется сверху (пикс.)
maxHeight	Number	450	Максимальная высота выпадающего списка (пикс.)

События

onselect

Событие возникает, когда был выбран или введён элемент из списка. Обработать событие можно, установив callback на onselect

var cityAutocomplete = Autocomplete('.autocomplete', options);
cityAutocomplete.onselect = function(element){
  console.log(element);
};

// Object {Id: 123, City: "Екатеринбург"}

Сборка

Собрать исходный код проекта можно с помощью npm

cd /path/to/project
npm install
npm build

При вызове команды npm build:prod будут сгенерированы минифицированные файлы

Дополнительные примеры

Автокомплит с поиском по вхождению

Город