Автозаполнение для поля input

Быстрый и легкий jQuery плагин для автозаполнения текстовых input полей формы. Он автоматически предлагает сопоставление введенных в текстовое поле ключевых слов с данными из массива, что позволяет пользователям быстро находить нужные значения.

Пример:

Введите в поле ниже несколько букв от названия любого города РФ

Введите в поле ниже несколько букв латинского алфавита

Установка:

  • Подключаем оригинальный CSS autocomplete.css или используемый в этом примере at-autocomplete.css
  • Подключаем оригинальный JS autocomplete.js или с изменениями at-autocomplete.js, в котором полностью скрыт список для выбора при отсутствии совпадений.
  • Добавляем к текстовому полю input нужный ID

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

    и инициализируем с нужными настройками:

    $('#city').autocomplete({
       dataSource: cityList,
       valueProperty: 'Id',
       textProperty: 'Name',
       allowCustomValue: true
    });

    где cityList - массив с данными для автозаполнения вида:

    const cityList = [
       {Id:1,Name:'Адыгейск'},
       {Id:2,Name:'Майкоп'},
       {Id:3,Name:'Горно-Алтайск'},
          /* еще данные */
       {Id:1108,Name:'Углич'},
       {Id:1109,Name:'Ярославль'}
    ];

Настройки:

Имя По умолчанию Описание
dataSource [] Название массива данных для вывода пользователю
valueProperty null Свойство со значением массива
textProperty null Текстовое свойство массива
defaultValue - Значение по умолчанию, присвоенное текстовому полю
keyboardDelay 500 Задержка в миллисекундах при наборе текста
closeOnSelect true Закрытие раскрывающегося списка при выборе
allowCustomValue false Разрешение вводить пользовательское значение
showDropdownOnFocus true Показывать автозаполнение в фокусе текстового поля
showDropdownOnLoad false Показать выпадающий список при загрузке страницы
selectedClass - Пользовательский класс, который добавляется к выбранному элементу
wrapClass - Пользовательский класс, который добавляется к контейнеру раскрывающегося списка
onClick null Функция обратного вызова, которая срабатывает при выборе элемента
onChange null Функция обратного вызова, которая срабатывает при изменении значения

Плагин Autocomplete на github.com

Смотрите также:

Адаптивная reCAPTCHA

Правильное отображение капчи reCAPTCHA на малых экранах и в узких блоках

Добавить комментарий:

Ваш комментарий отправлен!