Автозаполнение форм. JQuery UI Autocomplete — Использование виджета автозаполнения

a! Представляю Вам очередную статью в рубрике «Плагины». Рассмотрим плагин jQuery-Autocomplete , с помощью которого легко создать автозаполнение текстовых полей формы. Работает только на jQuery, для хранение значений автозаполнения можно использовать текстовый файл.

HTML разметка

У поля к которому следуют прикрепить автозаполнение, должен быть атрибут id , именно по нему будет идти привязка:
Использование

Теперь вызываем метод .autocomplete :

В приведенном примере метод .autocomplete вызывается с 2мя параметрами, lookup где
countriesArray — это массив со странами, о нем и как он формируется немного ниже, а также onSelect — функция обратного вызова при выборе элемента из предложенного списка.

Параметры
  • serviceUrl — путь до файла с значениями.
  • lookup — массив значений. Это может быть массив строк или:
    • suggestion — литерал объекта в формате { value: ‘string’, data: any }
  • lookupFilter — function (suggestion, query, queryLowerCase) {} Функция фильтрации для поиска в массиве. По умолчанию частичное совпадение строк (без учета регистра);
  • onSelect — Callback функция, вызывается когда пользователь выбирает значение из предложенного списка;
  • minChars — Минимальное количество символов, необходимых для запуска автозаполнения. По умолчанию: 1;
  • maxHeight — Максимальная высота контейнера со списком значений, в пикселях. По умолчанию: 300;
  • deferRequestBy — Количество миллисекунд задержки AJAX запроса. По умолчанию: 0;
  • width — Ширина контейнера со списком значений автозаполнения в пикселях, например: 300. По умолчанию: auto;
  • params — Дополнительные параметры, передаваемые с запросом, необязательно.
  • formatResult — function (suggestion, currentValue) {} пользовательские функции, необязательно.
  • delimiter — Строка или RegExp, который разбивает входное значение. Полезно когда, например, вам нужно заполнить список значений, разделенных запятыми;
  • zIndex — свойство css zIndex для контейнера со списком предложений. По умолчанию: 9999;
  • type — тип Ajax запроса. По умолчанию: GET ;
  • noCache — Логическое значение, указывающее, следует ли кэшировать результаты списка предложений. По умолчанию True.
  • onSearchStart — function (query) {} вызывается перед запроса AJAX. this связано с input элементом;
  • onSearchComplete — function (query) {} вызывается после запроса AJAX. this связано с input элементом;
  • tabDisabled — по-умолчанию false . Устанавливает курсор ввода после выбора предложенного значения;
  • paramName — по-умолчанию query . Имя параметра запроса, который содержит запрос;
  • transformResult — function(response) {} Вызывается после того, как станет готов результат запроса. Преобразует результат в response.suggestions формат;
  • autoSelectFirst — если установлено true , первый пункт будет подсвечен при показе списка предложений. Значение по-умолчанию false ;
  • appendTo — контейнер, в который будет добавлен список предложений. По-умолчанию body . Может быть JQuery объект, селектор или HTML элемент. Убедитесь в том, чтобы было установлено position: absolute или position: relative для этого элемента.
Массив со списком значений выбора

Теперь о массиве со списком значений выбора. Как писалось в начале это также может быть отдельный текстовый файл, с соответствующей структурой. Вот так выглядит массив:

1
2
3
4
5

var countriesArray = [
{ value: "Andorra" , data: "AD" } ,
// ...
{ value: "Zimbabwe" , data: "ZZ" }
] ;

1
2
3
4
5
6
7

// Подгружаем страны из текстового файла:
$.ajax ({
url: "content/countries.txt" ,
dataType: "json"
} ) .done (function (source) {

var countriesArray = $.map (source, function (value, key) { return { value: value, data: key } ; } ) ;

Где с помощью метода $.map переводим все элементы массива из файла в новый массив со значениями.

Оформление

Структура списка предложений выглядит так:

1
2
3
4
5


...
...
...

И применяется простое оформление.


Disclaimer (Attention detected!)

Сразу заявляю, что ни один из существующий, а также фреймворков будущего, и близко не стоит рядом с $mol. Я ни в коем случае не утверждаю, что какой-либо иной фреймворк круче чем $mol, потому что с $mol просто невозможно соревноваться в крутости. Это самый крутой фреймворк из когда-либо созданных человечеством. Уверен именно $mol спасет мир!
Ну, а теперь можно поговорить о Svelte) Так как это пятничный пост, постараюсь его сильно не затягивать.

Итак, задача сделать переиспользуемый микро-компонент автодополнения с поддержкой асинхронной подгрузки списка вариантов. Иными словами, начинаем ввод искомого значения - выпадает список вариантов, который может задаваться как статически (некий массив), а так и подгружаться динамически с сервера.

Собственно сам svelte-компонент может выглядеть так:

{{#await suggestions}} {{then options}} {{#each options as option}} {{ option }} {{/each}} {{/await}} export default { data: () => ({ search: "", suggestions: }) };

Ремарка

Внимательный читатель сразу заметит своеобразный «life-hack», который тут присутствует. А именно использование html5-тега , который фактически и создавался для подобных вещей, однако до сих пор имеет слабую поддержку браузерами .

Хочу отметить, что использую его здесь чисто в демонстрационных целях, чтобы визуально упростить код для лучшего понимания, а также потому что конкретная реализация выпадающего списка не является целью статьи. Переделать список с на