Автозаполнение форм.

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

... ... ...

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

Последнее обновление: 1.11.2015

Виджет autocomplete предназначен для создания специальных полей ввода с функцией автозаполнения:

В качестве источника автозаполнения указываем какой-нибудь массив и потом применяем виджет.

Подключение виджета к внешнему источнику

В предыдущем примере источник для списка автозаполнения задавался локально. Однако мы можем также динамически подключаться к какому-нибудь скрипту на сервере, который бы нам возвращал список вариантов для автозаполнения. В нашем случае это будет скрипт php. Пусть он будет выглядеть следующим образом:

Выходная переменная $output содержит весь список в формате json. В реальности, конечно, все элементы списка, скорее всего, будут извлекаться из БД, но я для простоты упростил пример.

По сути каждый элемент списка - это объект, у которого определены два свойства: label (отображаемая метка) и value (само значение). В данном случае оба свойства по значению совпадают.

На стороне клиента прием мог бы выглядеть следующим образом:

$("input#lang").autocomplete({ source: function(request,response) { $.getJSON("json.php", { filter: $("input#lang").val() }, function(data){ var suggestions = ; // массив для хранения результатов $.each(data, function(key, val) { suggestions.push(val.value); // добавляем все элементы }); response(suggestions); }); } });

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

Стилизация виджета

При применении виджета к элементу input к данному элементу добавляется класс ui-autocomplete-input . А область списка автозаполения представляет собой список ul:

• Java
• JavaScript

Изменив стили соответствующих классов, мы можем настроить отображение списка:

li.ui-menu-item { font-size: 12px; font-faminy: Verdana; } $(function(){ var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ; $("input#lang").autocomplete({ source: langs }); });

Свойства виджета

Виджет имеет следующие свойства:

appendTo: указывает, какой элемент будет включать список для автозаполенния:

$(function(){ var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ; $("input#lang").autocomplete({ appendTo: "#langsList", source: langs }); });

autoFocus: при установке данного свойства в true выделяется первый элемент списка автозаполнения. По умолчанию свойство имеет значение false .

delay: указывает в миллисекундах время задержки до показа списка автозаполенния ($("#langs").autocomplete({ delay: 500 });). По умолчанию данное свойство равно 300

disabled: при установке у свойства значения true отключает виджет. По умолчанию имеет значение false .

minLength: указывает на минимальное количество символов, которое должен ввести пользователь, чтобы отобразился список автозаполнения: $("#langs").autocomplete({ minLength: 0 }); . По умолчанию данное свойство имеет значение 1.

position: используя данное свойство, можно задать положение списка на странице. Объект, с помощью которого можно задать положение, использует ряд опций, список которых можно найти на странице https://api.jqueryui.com/position/ . По умолчанию свойство имеет значение { my: "left top", at: "left bottom", collision: "none" } . Опция my указывает на позицию элемента списка автозаполнения, относительно которой идет выравнивание с элементом ввода. То есть left top выравнивает относительно левого верхнего угла. Опция at указывает уже позицию элемента ввода, относительно которой будет выравниваться список автозаполнения. Опция collision дополнительно настраивает отображение списка.

Мы можем изменить начальные параметры, например, $("input#lang").autocomplete({ position: { my: "right top", at: "right bottom", collision: "fit" }, source: langs });

source: задает источник для автозаполнения. Это может быть массив, который можно задать в качестве внешнего массива или прямо при свойстве: $("input#lang").autocomplete({ source: ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"]});

Методы виджета

Виджет autocomplete имеет следующие методы:

autocomplete("close"): закрывает список ($("#lang").autocomplete("close");)

autocomplete("disable"): отключает виджет

autocomplete("enable"): подключает виджет автозаполнения

autocomplete("destroy"): удаляет функциональность автозаполнения у элемента

autocomplete("widget"): возвращает объект jQuery, представляющий виджет (var widget = $("#lang").autocomplete("widget");)

autocomplete("option"): позволяет получить или установить значения свойств виджета. Например, установим и получим значение свойства collapsible:

Var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ; $("input#lang").autocomplete({ source: langs}); $("input#lang").autocomplete("option", { autoFocus: true });

autocomplete("search", "value"): производит поиск по списку так с учетом значения value. Например, метод $("#lang").autocomplete("search", "i"); будет эквивалентен действию ввода символа "i" в текстовое поле. И затем буду отображены все элементы списка, в которых присутствует символ "i"

События виджета

С помощью обработки следующих событий виджета мы можем произвести определенные действия в ответ на действия пользователя:

change(event, ui) : событие возникает после изменения выбранного элемента.

Параметр event содержит объект события, а параметр ui представляет объект, который содержит информацию о выбранном элементе:

Var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ; $("input#lang").autocomplete({ source: langs}); $("input#lang").autocomplete({ change: function(event, ui) { console.log(ui.item.value); } });

Используя свойство ui.item , мы получаем выбранный элемент. Элемент определен в виде объекта {label, value}, поэому, чтобы получить значение выбранного элемента, используем свойство value

close(event, ui) : возникает при закрытии списка автозаполнения

create(event, ui) : возникает при создании виджета

focus(event, ui) : возникает при передаче фокуса элементу

open(event, ui) : возникает при открытии или отображении списка автозаполнения

response(event, ui) : возникает после завершения поиска, но перед тем, как список результатов автозаполнения появится на экране. Чтобы получить все результаты списка, надо использовать объект ui.content , который представляет массив:

Var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ; $("input#lang").autocomplete({ source: langs}); $("input#lang").autocomplete({ response: function(event, ui) { for (var i = 0; i

Создание виджета Autocomplete

После подготовительных работ мы можем приступать к созданию Autocomplete виджета. Для создание элемента автозаполнения библиотека jQuery UI представляет метод .autocomplete() , который нужно вызвать для текстового инпута.

HTML — index.html:

Форма поиска:

jQuery — scripts/main.js:

$(function() { var myArray = ["Человек", "самые популярные", "Мини-словарик"]; $("#myInput").autocomplete({ source: myArray }); });

Открываем в браузере файл index.html, и в текстовом поле начинаем вводить символы. В итоге, автозаполнение уже у нас работает.



Метод autocomplete принимает в качестве параметра объект с опциями. Один из опции этого объекта — это source. В качестве значение опции source нужно передать источник, из которого нужно взять данные для автозаполнения. В нашем примере мы передаем простой массив строк.

Нужно помнить, что виджет Autocomplete не проверяет правильность введенных данных. То есть, несмотря на то, что мы определить нужные значение для опции source, пользователь может вводить любые другие значение в текстовом поле.

Заметьте, что массив данных сортируется автоматически. Это за нас делает библиотека jQuery UI. Кроме того, что он за нас сортирует массив данных, он может эти данные для автозаполнения получить из разных источников.

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

Мы можем передать массив объектов в качестве данных для автозаполнения текстовых полей. Данный метод позволяет отделить значение, которое видна в раскрывающемся списке, от значение которое нужно подставить в текстовое поле.

$(function() { var myArray = [ {"label": "Кармен Электра", "value": "Кармен"}, {"label": "Николас Кейдж", "value": "Николас"}, {"label": "Оливия Уайлд", "value": "Оливия"}, {"label": "Рассел Кроу", "value": "Кроу"} ]; $("#myInput").autocomplete({ source: myArray }); });

В объекте ключи label и value обязательны , потому что, при использование массива объектов, библиотека автоматически ищет ключи label и value. В качестве значение свойства label нужно указать текст, который будет отображаться в выпадающем списке, а в качестве значение ключа value нужно указать текст, который будет введен в текстовое поле после выбора из выпадающего списка.

Настройка виджета Autocomplete

Виджет автозаполнения jQuery UI имеет несколько свойств, с помощью которых мы можем его настроить. Ниже представлен список этих свойств.

• appendTo — С помощью этого свойства мы можем определить HTML элемент, к которому будет присоединен раскрывающийся список элементов. По умолчанию это элемент body.
• autoFocus — Значение этого свойства по умолчанию указан false. Если опцию дать значение true, то будет автоматически указываться фокус на первый элемент списка.
• delay — Данная опция в качестве значение принимает цифры. Он определяет длительность периода задержки после нажатия клавиши, по истечение которого будет будет срабатывать автозаполнение. Нужно указать значение в миллисекунда. Значение по умолчанию — 300 миллисекунды.
• disabled — Данная опция позволяет отключить автозаполнения, если установить значение true. Нужно отметить, что он никак не влияет работу текстового поля, просто отключает автозаполнения. По умолчанию установлен значения false.
• minLength — Данная опция в качестве значение принимает целочисленные цифры. Он определяет минимальное количество вводимых символов, после которого будет работать автозаполнение. Значение по умолчанию — 1.
• source — В качестве значение можно установить источник данных раскрывающегося списка. Это обязательное поле и он не имеет значение по умолчанию.
Использование сервера в качестве источника данных для Autocomplete

Опция source может принимать данные для раскрывающегося списка автозаполнения из самых разных источников. То есть, кроме примеров, которые я показал выше, мы можем эти данные получить из сервера или из другого сайта. Как и из нашего сервера (back-end), так и из другого источника мы ожидаем только данные в виде массива (может быть в формате JSON). Для получение данные с сервера нужно просто указать URL адрес в качестве значения ключа source.

$(function() { $("#myInput").autocomplete({ source: "https://site.ru/api/search?key=Hello" }); });

Код выше не будет работать, это просто пример использование.

В этом случае, как только мы начинаем вводить символы в поле input, виджет автоматически будет выполнять HTTP GET запросы по этому адресу, чтобы получить список данных с сервера.