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

Ну вот и готова предрелизная версия mSearch2. Мы должны ее дружно потетстировать, поправить баги и получится стабильная версия.

В принципе, теперь я воплотил все свои (и не только свои) хотелки. У нас добавилось управление словарями прямо в вдминке и автодополнение.

Со словарями всё просто - при установке дополнения сразу загружаются 2 словаря: русский и английский. Если вам нужно добавить или удалить словарь, для этого появился новый раздел в админке.
В индексации участвуют все установленные словари, ничего настраивать не нужно. При загрузке словаря вы можете выбрать зеркало SourceForge, чтобы качать с ближайшего к вам сервера.

АвтодополнениеЭту штуку просят сделать уже давно, но так как она весьма непростая, реализация затянулась. Фокус в том, что автозаполнение на готовом сайте «для себя» сделать нетрудно, а вот написать универсально, чтобы вы могли показывать и категории, и запросы, и товары с картинками - это заморочка.

Но все вопросы решены и теперь у нас есть новый сниппет mSearchForm . Вот его параметры:

• &pageId - id страницы, на которую будет отправлен юзер в месте с запросом. Если не указано - это будет текущая страница.
• &tplForm - чанк с фомой для вывода. У тега form обязательно должен быть указан класс msearch2 .
• &tpl - Оформление строчек автодополнения.
• &autocomplete - Настройка автоподсказок. Доступно 3 варианта: results (по умолчанию, поиск по сайту), queries (поиск по запросам) и 0 - отключить.
• &limit - Ограничение выборки строк автодополнения.
• &element - Какой сниппет оформляет результаты. Это актуально только для режима results .

Итак, у нас есть 2 варианта работы autocomplete: поиск по сайту и поиск по запросам.

Первый самый интересный - он ищет точно так же как и сниппет mSearch2, получает id совпадений и передаёт их в указанный сниппет. А сниппет может быть любым, главное, чтобы он понимал параметр &resources .

Заодно сниппету будут переданы все параметры, указанные при вызове mSearchForm - очень похоже на работу mFilter2 с пагинатором.

Таким образом, вы можете указать чанки, подключение ТВ, таблиц, картинок товаров и чего угодно. Так как этот режим сразу выводит точное совпадение, при выборе результата вы отправитесь на конечную страницу - вам нечего искать, вы уже нашли.

Понятно, можно не кликать, а жать enter и будет поиск по тому, что вы набрали, без подсказок. Конечно, все теги в чанках выполняются. Например, мне очень нравится вызывать в них pdoCrumbs .

А второй режим попроще - он просто смотрит таблицу запросов, которая появилась в прошлой версии, и выводит совпадения из неё. Выводит, понятно, только те, что с результатами. Потому, что от дополнения «ккккувпусм» толку никакого не будет (вы бы видели, что у меня на сайте ищут).

Само дополнение работает на

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-тега , который фактически и создавался для подобных вещей, однако до сих пор имеет слабую поддержку браузерами .

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

с парочкой стилей не представляется сложной задачей.


В итоге, у нас имеется простенький шаблон с полем для ввода и привязанным к нему списком вариантов. Поле для ввода биндится на переменную «search» в данных компонента, а список вариантов задается динамически с помощью массива «suggestions».

Обратите внимание на {{#await /}} в шаблоне. Именно эта простая конструкция позволяет нам не беспокоиться является ли переменная «suggestions» реальным массивом или же это промис, который будет разрешен в массив.

Здесь пожалуй все, теперь перейдем к использованию:

Selected location: {{ location }} import Autocomplete from "./Autocomplete.html" import { fetchLocations } from "./api.js" export default { data: () => ({ location: "" }), computed: { locations: location => { return location.length >= 3 ? fetchLocations(location) : } }, components: { Autocomplete } };
Это некий родительский компонент, который реализует domain-логику конкретного кейса. В данном случае - это выбор локации (города).

Сначала подключается компонент автодополнения, а также некий модуль, реализующий взаимодействие с серверным API. У нас также есть переменная «location», куда мы собственно сохраняем выбранное значение. Она биндится на «search» из компонента автокомплита через props, а также выводится неким результирующим значением чуть выше.

Далее интересный момент. Так как Svelte поддерживает вывод асинхронных значений через {{#await /}}, а также вычисляемые свойства (computed props), которые могут зависеть от других данным, мы можем написать супер простое вычисляемое свойство для получения списка вариантов с сервера и подвязать его на изменение «location». Т.е. когда пользователь вводит значение в поле, реактивная переменная «location» изменяется, что приводит к пересчету вычисляемого свойства «locations». Данное свойство также биндится на «suggestions» из компонента автокомплита через props. И все работает как «магия»))))

Отмечу также, что для того, чтобы пример работал хорошо, необходима реализация метода debounce, чтобы не завалить сервер лишними запросами. В данном случае, подразумевается, что debounce уже реализуется внутри функции fetchLocations(), потому как он не имеет прямого отношения к примеру.

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

Далее, так как к предыдущей статетье про Svelte было задано много вопросов, касающихся принципа работы Svelte, AoT-компиляции svelte-компонентов и вероятным дублированием кода. Представляю вольный перевод вот этого комментария создателя Svelte Рича Харриса (Rich Harris):

Это хороший вопрос. Я бы ответил на него несколькими способами:
• Часть кода переиспользуется между компонентами (например, такие методы как detachNode и др.) если мы компилируем код с помощью флага shared: true (что происходит автоматически при использовании интеграций с билд-тулзами, таких, как svelte-loader или rollup-plugin-svelte). В том случае, все эти штуки не дублируются, уменьшая накладные расходы.
• Код генерируется так, чтобы быть более-менее удобочитаемым, но при этом иметь довольно не большой размер.
• Тем не менее, в теории есть точка перехода, где размер генерируемого кода превышает размер фреймворка + шаблонов. Однако к тому времени, когда ваше приложение вырастет до такого размера вам скорее всего понадобиться использовать техники разделения кода (code-splitting). Например, подгружать компоненты асинхронно, на основании текущего URL. Методы разделения кода работают намного лучше со Svelte, чем с традиционными фреймворками, потому что традиционно, даже самый маленький кусок кода зависит от всей библиотеки.
• Размер кода - это лишь одна их целей Svelte. Другими целями являются высокая производительность, обеспечение хорошего опыта для разработчиков (так как компилятор основан на статическом анализе кода, мы можем иметь полезные сообщения об ошибках и другие виды предупреждений, как в Elm). Также большой плюс такого подхода отсутствие необходимости говорить «нет» хорошим идеям новых фич для фреймворка, потому как появление новых возможностей никак не влияет на людей, которые их не используют. Традиционные фреймворки всегда вынуждены искать баланс между размерами фреймворка и потребностями его пользователей. И так далее.
• В любом случае мы можем и будем уменьшать размер генерируемого кода, например с помощью более умной обработки пробелов или использования innerHTML в тех случаях, когда есть большой кусок статической разметки, который не имеет смысла генерировать программно. В итоге, размер генерируемого кода будет лишь уменьшаться с развитием компилятора.
Конечно же есть компромиссы, например, относительно Ractive - это гибкость. Мы не можем сделать this.observe("some.nested.property", () => {}) или использовать адапторы для сложных переменных, или иметь {{#with ...}} блоки в шаблонах и другие вещи. Все это имеет смысл в Ractive, который использует философию «делай что я имею ввиду». В то время как Svelte базируется на статическом анализе и больше на том что «делай что я говорю», что в конце концов это более строгий вариант.

От себя хочу добавить, что еще не пробовал Svelte на более-менее крупном проекте (хотя и планирую). Также я не противопоставляю его таким гигантам как Angular или даже Vue. На том поле скорее играет Ractive, чем Svelte.

Однако, считаю что он прекрасно занимает нишу небольших (виджеты и т.п.) и средних проектов (мобильные и ТВ приложения и т.п.). В таких проектах Svelte несомненно обеспечивает меньший размер бандла и большую скорость работы. Если для вас это актуально, вам стоит познакомиться с ним поближе.

Всем хороших выходных! И да прибудет с вами Сила пятницы!

UPDATE:
Для тех, кто обеспокоен дублированием кода в Svelte. Есть новая информация непосредственно от Рича Харриса. Мой комментарий на эту тему можно прочитать

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

... ... ...

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

В данном уроке мы рассмотрим один из новых компонентов jQuery UI 1.8 - виджет Autocomplete. Автозаполнение полей формы может быть очень полезной функцией для посетителей вашего сайта, так как она облегчает ввод информации. Такую функцию можно использовать, например, для поля, или при вводе страны, города, или чего либо подобного, что можно выбрать из общего списка. Виджет jQuery UI Autocomplete популярен у разработчиков, так как его легко использовать, он достаточно мощный и гибкий.

Одним из свойств Facebook является отправка сообщений друзьям. Автозаполнение используется при вводе имени друга. В данном уроке мы будем использовать виджет jQuery UI Autocomplete для создания системы, подобной той, которая используется при отправке сообщений в Facebook. Конечно, отправку сообщения реализовывать не будем. Вот что должно получиться в итоге:



Шаг 1 Getting Started

Нужно построить пользовательскую загрузку jQuery UI, которая будет содержать только нужные компоненты. Переходим на страницу построения загрузки на http://jqueryui.com/download . Нам нужно использовать только следующие компоненты:

• Widget
• Position
• Autocomplete

Нужно использовать тему по умолчанию (UI Lightness) и убедиться в том, что выбрана версия 1.8 в колонке справа.

Шаг 2 Разметка HTML

Сначала посмотрим на :

Новое сообщение Новое сообщение Кому: Тема: Сообщение: Отменить Отправить

Это обычная стандартная форма. Внешний контейнер используется для задания стилей, а элемент , к которому будет присоединяться Autocomplete, также находится внутри элемента . Стиль для задается так, что он немного скрыт, а стиль придает ему вид, схожий с остальными полями формы. Контейнеру придается класс ui-helper-clearfix , чтобы использовать данный класс из CSS рабочей среды jQuery UI.

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

Шаг 3 Стили для формы



Мы используем очень простую нейтральную тему в нашем примере. Следующий код CSS содержится в файле autocomplete.css (все стили jQuery UI устанавливаются в файле jquery-ui-1.8.custom.css ):

#formWrap { padding:10px; position:absolute; float:left; background-color:#000; background:rgba(0,0,0,.5); -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } #messageForm { width:326px; border:1px solid #666; background-color:#eee; } #messageForm fieldset { padding:0; margin:0; position:relative; border:none; background-color:#eee; } #messageForm legend { visibility:hidden; height:0; } #messageForm span { display:block; width:326px; padding:10px 0; margin:0 0 20px; text-indent:20px; background-color:#bbb; border-bottom:1px solid #333; font:18px Georgia, Serif; color:#fff; } #friends { width:274px; padding:3px 3px 0; margin:0 auto; border:1px solid #aaa; background-color:#fff; cursor:text; } #messageForm #to { width:30px; margin:0 0 2px 0; padding:0 0 3px; position:relative; top:0; float:left; border:none; } #messageForm input, #messageForm textarea { display:block; width:274px; padding:3px; margin:0 auto 20px; border:1px solid #aaa; } #messageForm label { display:block; margin:20px 0 3px; text-indent:22px; font:bold 11px Verdana, Sans-serif; color:#666; } #messageForm #toLabel { margin-top:0; } #messageForm button { float:right; margin:0 0 20px 0; } #messageForm #cancel { margin-right:20px; } #friends span { display:block; margin:0 3px 3px 0; padding:3px 20px 4px 8px; position:relative; float:left; background-color:#eee; border:1px solid #333; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; color:#333; font:normal 11px Verdana, Sans-serif; } #friends span a { position:absolute; right:8px; top:2px; color:#666; font:bold 12px Verdana, Sans-serif; text-decoration:none; } #friends span a:hover { color:#ff0000; } .ui-menu .ui-menu-item { white-space:nowrap; padding:0 10px 0 0; }

Для придания форме чудесных прозрачных границ с закругленными углами используется правила CSS3 rgba , -moz-border-radius , -webkit-border-radius и border-radius . IE не поддерживает ни одного их данных правил, и, хотя можно использовать фильтр для воспроизведения зачатка прозрачности, скругленные углы можно сделать только с использованием изображений. Эффективность прозрачности RGBa не проявляется в данном примере в полной силе. Вероятно, что данный тип формы будет использоваться как плавающее модальное окно поверх контента страницы.

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

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

Форма должна иметь следующий вид:



Шаг 4 Присоединяем Autocomplete

Теперь нужно присоединить виджет Autocomplete к внутри . Для этого используется следующий скрипт:

$(function(){ //Присоединяем автозаполнение $("#to").autocomplete({ //Определяем обратный вызов к результатам форматирования source: function(req, add){ //Передаём запрос на сервер $.getJSON("friends.php?callback=?", req, function(data) { //Создаем массив для объектов ответа var suggestions = ; //Обрабатываем ответ $.each(data, function(i, val){ suggestions.push(val.name); }); //Передаем массив обратному вызову add(suggestions); }); }, //Определяем обработчик селектора select: function(e, ui) { //Создаем форматированную переменную friend var friend = ui.item.value, span = $("").text(friend), a = $("").addClass("remove").attr({ href: "javascript:", title: "Remove " + friend }).text("x").appendTo(span); //Добавляем friend к div friend span.insertBefore("#to"); }, //Определяем обработчик выбора change: function() { //Сохраняем поле "Кому" без изменений и в правильной позиции $("#to").val("").css("top", 2); } }); });

Виджет присоединяется к с помощью метода autocomplete() . объект передается литерально как аргумент метода, который конфигурирует опцию source и возвратные функции событий select и change .

Опция source используется для указания источника предложения для меню Autocomplete. Мы используем функцию, как значение для данной опции, которая принимает два аргумента. Первый является термином, введенным в , а второй - возвратной функцией, которая используется для передачи предложений обратно виджету.

В данной функции мы используем метод jQuery getJSON() для передачи термина в PHP файл на стороне сервера. Файл PHP использует термин для извлечения похожих имен контакта из базы данных MySql. Мы используем JSONP для возвращения полученных данных обратно процессу. Возвратная функция, которая передается как второй аргумент опции source, предполагает получение данных в массиве. Таким образом нужно создать пустой массив и использовать метод jQuery each() для обработки каждого пункта массива JSON, который возвращается сервером. Итерация совершается над каждым пунктом в массиве и добавляет каждое предложение в новый массив. Как только новый массив будет построен, мы передаем его возвратной функции для вывода виджетом в меню.

Затем определяется обработчик для события select Autocomplete. Данная функция выполняется виджетом каждый раз, когда предложение выделяется в меню Autocomplete. Данная функция автоматически получает два аргумента - объект события и объект ui, который содержит выбранное предложение. Мы используем данную функцию для форматирования имени получателя и добавления его в . Просто создается элемент для текста и элемента ссылки, которая используется для удаления получателя. Как только форматированное имя получателя будет создано, оно вставляется прямо перед закамуфлированным .

Затем мы добавляем обработчик события change. Данная функция будет вызвана при изменениях значения , с которым ассоциирован Autocomplete. Мы просто удаляем значение из , потому что мы уже добавляли форматированную версию в контейнер .

Это вся конфигурация, которая нужна для конкретного применения, но есть еще пара функций, которые нужны для придания аккуратности коду. После метода autocomplete() добавим следующий код:

//Добавляем обработчки события click для div friends $("#friends").click(function(){ //Фокусируемся на поле "Кому" $("#to").focus(); }); //Добавляем обработчик для события click удаленным ссылкам $(".remove", document.getElementById("friends")).live("click", function(){ //Удаляем текущее поле $(this).parent().remove(); //Корректируем положение поля "Кому" if($("#friends span").length === 0) { $("#to").css("top", 0); } });

, к которому прикреплен наш Autocomplete, практически скрыт и контейнер имеет стиль, который делает его похожим на другие поля формы. Для завершения обмана мы добавляем обработчик события click контейнеру , таким образом нажатие клавиши мыши где-угодно на нем фокусирует действительный . Теперь визуально и функционально не отличается от обычного поля.

Также нужно обрабатывать событие click на ссылке, которая добавляется для каждого форматированного имени получателя. Мы используем метод jQuery live() потому, что данный элемент может и не существовать на странице в заданное время, и такой подход проще, чем привязывание функции обработчика каждый раз, когда создается ссылка. Когда бы не была нажат ссылка, все что нужно сделать, это перейти к родителю ссылки и затем удалить ее со страницы. Нужно проверить, удалены ли все имена получателей, и если это так, то сбросить положение к значению по умолчанию.

Шаг 5 Дополнительный код и ресурсы

Для хранения списка всех имен получателей используется база данных MySql. Следующий файл PHP получает данные, отправленные методом getJSON() и вытаскивает соответствующие имена получателей из базы данных:

Для запуска примера нужен веб сервер с установленным и сконфигурированным PHP, а также сервер MySql и соответствующая база данных и таблица. Когда символ вводится в поле ‘Кому’, он передается на сревер и используется для вытаскивания из базы данных каждого имени, которое начинается с введенного символа. Подходящие имена затем передаются обратно на страницу и выводятся в меню предложений:



Заключение

Наша форма в действительности ничего никуда не отправляет. Функционал легко реализовать с помощью обработки события, привязанного к кнопке "Отправить".

Виджет jQuery UI Autocomplete делает простым соединение с любым источником данных и содержит богатый функционал для обработки событий, которые мы можем использовать для того, чтобы реагировать на ввод текста в ассоциированное поле или выбор предложения из меню. Виджет стилизуется с использованием рабочей среды CSS jQuery UI и может легко быть настроен на то, чтобы соответствовать теме сайта. В целом, описанный виджет очень легок в использовании и обеспечивает отличный функционал.

jQuery UI Autocomplete — Использование виджета автозаполнения

5 (100%) 3 votes

В этом уроке мы подробно рассмотрим виджет Autocomplete (Автозаполнения) в jQuery UI. Этот плагин позволяет облегчить ручной ввод информации в текстовые поля формы. По мере ввода символов в input, пользователю предлагаются варианты автоматического заполнения текстовых полей. Этот виджет позволяет избежать ошибок ввода и делает приложению или сайт более дружелюбным и простым для ваших пользователей. Ниже посмотрим, как можно создать, настроить и использовать виджет/плагин Autocomplete.

Подготовительные работы

Для работы с библиотекой jQuery UI нам нужно скачать библиотеку jQuery и jQuery UI, и создать небольшой проект. Я подключаю библиотеку jQuery с сервера CDN, а jQuery UI можете скачать отсюда .

Структура нашего проекта будет иметь такой вид: Создал папку с названием «project», внутри него есть две папки и один HTML файл

• css — здесь наш css файл,
• scripts — здесь наш файл скриптов и папка скачанной с сайта jQuery UI
• index.html — HTML файл

В HTML файле нам нужно подключить все необходимые библиотеки и файлы:

jQuery UI

Создание виджета 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 запросы по этому адресу, чтобы получить список данных с сервера.