Автозаполнение — это функция в веб-приложениях, которая прогнозирует остаток слова или предложения, пока пользователь все еще печатает. Пользователи обычно нажимают клавишу табуляции, чтобы принять предложение, или клавишу со стрелкой вниз, чтобы принять одно из нескольких.
В этом руководстве мы рассмотрим, как использовать библиотеку JavaScript Awesomplete для создания виджета автозаполнения на наших веб-сайтах. Awesomplete создан Леа Веру , известной оратором, автором и приглашенным экспертом в рабочей группе W3C CSS.
Почему бы не использовать элемент datalist HTML5?
Элемент списка данных HTML5 , возможно, является наиболее простым способом реализации функции автозаполнения на веб-сайте. К сожалению, поддержка этого элемента в браузере ограничена, и его реализация несовместима (например, Chrome совпадает только с самого начала, Firefox везде). Также невозможно оформить его в соответствии с дизайном вашего сайта, и, хотя он обещает, это, вероятно, еще не правильный выбор.
Awesomplete, с другой стороны, представляет собой сверхлегкий, настраиваемый виджет автозаполнения, который вы можете поместить на свои страницы. Он имеет нулевые зависимости (без jQuery), работает во всех современных браузерах и может быть стилизован под тему вашего сайта.
Так чего же мы ждем? Давайте погрузимся в!
Включение Awesomplete в вашу веб-страницу
Чтобы использовать библиотеку Awesomplete, нам нужны два файла: awesomplete.css и awesomplete.js .
Вы можете получить их с помощью беседки:
bower install https://github.com/LeaVerou/awesomplete.git#gh-pages
Загружая их непосредственно с веб-сайта Awesomplete .
Или, включив их через RawGit CDN (который подает необработанные файлы непосредственно из GitHub с соответствующими заголовками Content-Type). Это продемонстрировано ниже.
Для создания базового виджета необходим элемент ввода с классом awesomplete , за которым следуют связанные параметры в элементе списка данных. Атрибут list входного элемента должен соответствовать id элемента list данных. Это разумная конфигурация по умолчанию, поскольку она предлагает откат для всех пользователей с отключенным JavaScript.
<!doctype html> <html> <head> <link rel="stylesheet" href="https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.css"> </head> <body> <input class="awesomplete" list="mylist" /> <datalist id="mylist"> <option>One</option> <option>Two</option> <option>Three</option> </datalist> <script src="https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.min.js"></script> </body> </html>
Основная функциональность
Есть много способов использовать эту универсальную библиотеку. Давайте начнем с базового варианта использования.
Использование атрибута data-list
Можно переместить параметры из вышеупомянутого элемента data-list атрибут data-list на самом элементе ввода.
<input class="awesomplete" data-minchars="1" data-maxitems="5" data-list="China, India, Japan, Russia, UK, USA" />
Использование JavaScript
Вышеуказанные решения полезны, если параметры автозаполнения являются статическими. Тем не мение. Для динамического создания списка и дальнейшей настройки поведения виджета автозаполнения нам нужен метод JavaScript.
<input id="countries" /> var input = document.getElementById("countries"); var awesomplete = new Awesomplete(input, { minChars: 1, maxItems: 5, autoFirst: true }); awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];
Здесь мы создаем объект Awesomplete , передавая ему два параметра: ссылку на наш входной элемент и литерал объекта, содержащий параметры конфигурации.
Затем мы присваиваем свойство list нашего объекта Awesomplete массиву, содержащему список опций автозаполнения. В демонстрационном примере ниже я расширил массив названий стран, используя этот удобный фрагмент .
Также обратите внимание, что minChars , maxItems и autoFirst такие же, как у data-minchars , data-maxitems и data-autofirst в предыдущей демонстрации.
При использовании JavaScript для создания экземпляра автозаполнения у нас есть доступ ко многим другим свойствам , API и событиям . Давайте посмотрим, что они из себя представляют, как их использовать?
Расширенные свойства JavaScript
Есть четыре других свойства, поддерживаемых объектом Awesomplete . Это: filter , sort , sort и replace . Эти четыре свойства имеют назначенные им функции.
Свойство filter контролирует соответствие записей. Его функция обратного вызова принимает два параметра: текущий текст предложения (в нашем примере каждое из значений «Китай», «Индия», «Япония», «Россия», «Великобритания», «США») и строка, содержащая ввод пользователя. По умолчанию входные данные могут совпадать в любом месте строки, и это без учета регистра.
В следующем примере показано, как заставить Awesomplete выполнять сравнение с учетом регистра:
function myFilterFunc(text, input) { return text.indexOf(input) > -1; } var input = document.getElementById("countries"); var awesomplete = new Awesomplete(input, { filter: myFilterFunc }); awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];
Свойство sort определяет порядок sort элементов списка. Его обратный вызов имеет тот же прототип, что и функция Array.prototype.sort () .
Вот как вы можете использовать его для сортировки совпадений в обратном алфавитном порядке:
function mySortFunc(text, input) { return text < input; } var input = document.getElementById("countries"); var awesomplete = new Awesomplete(input, { sort: mySortFunc }); awesomplete.list = ['Albania', 'Brazil', 'Chile', 'Denmark', 'Egypt'];
Свойство item контролирует, как создаются элементы списка. Этот обратный вызов также имеет два аргумента: текущий текст предложения и вводимые пользователем данные. Должен вернуть элемент списка. Вот как вы можете использовать свойство item для выделения пользовательского ввода в тексте предложения:
function myItemFunc(text, input){ return Awesomplete.$.create("li", { innerHTML: text.replace(RegExp(input.trim(), "gi"), "<mark>$&</mark>"), "aria-selected": "false" }); } var input = document.getElementById("countries"); var awesomplete = new Awesomplete(input, { item: myItemFunc }); awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];
Четвертое и последнее свойство — это свойство replace . Свойство replace управляет тем, как выбор пользователя заменяет вводимые пользователем данные. В отличие от предыдущих трех функций, этот обратный вызов принимает один параметр: текст выбранной опции. Это срабатывает, когда пользователь выбирает один из предложенных вариантов (например, нажав на него).
Вот как вы можете использовать его для преобразования выбора пользователя в верхний регистр:
function myReplaceFunc(text) { input.value = text.toUpperCase(); } var input = document.getElementById("countries"); var awesomplete = new Awesomplete(input, { replace: myReplaceFunc }); awesomplete.list = ['Albania', 'Brazil', 'Chile', 'Denmark', 'Egypt'];
Связывая все вместе
Вот демонстрация, показывающая, как объединить функции filter и item чтобы сделать предложение только после того, как пользователь ввел указанные символы (в этом случае запятая, за которой следует пробел):
Копаем глубже — События, API и Ajax
Эта библиотека запускает пять пользовательских событий. Это: awesomplete-select , awesomplete-selectcomplete , awesomplete-open , awesomplete-close и awesomplete-highlight .
Вот как вы могли бы подключиться к каждому из этих событий:
window.addEventListener("awesomplete-select", function(e){ // User made a selection from dropdown. // This is fired before the selection is applied }, false); window.addEventListener("awesomplete-selectcomplete", function(e){ // User made a selection from dropdown. // This is fired after the selection is applied }, false); window.addEventListener("awesomplete-open", function(e){ // The popup just appeared. }, false); window.addEventListener("awesomplete-close", function(e){ // The popup just closed. }, false); window.addEventListener("awesomplete-highlight", function(e){ // The highlighted item just changed // (in response to pressing an arrow key or via an API call). }, false);
Awesomplete предоставляет различные методы Awesomplete объекта Awesomplete которые позволяют настроить его поведение:
-
open(): используется для открытия всплывающего окна. -
close(): используется для закрытия всплывающего окна. -
next(): используется для выделения следующего элемента во всплывающем окне. -
previous(): используется для выделения предыдущего элемента во всплывающем окне. -
goto(i): используется для выделения элемента с индексомiво всплывающем окне (-1 для отмены выбора всех). -
select(): используется для выбора выделенного в данный момент элемента, замены им значения текстового поля и закрытия всплывающего окна. -
evaluate(): используется для оценки текущего состояния виджета и создания списка предложений. Закрывает всплывающее окно, если ни один не доступен. Этот метод особенно полезен, если вы динамически устанавливаете свойствоlistкогда открыто всплывающее окно.
Примечание : open() данный момент не откроет список до того, как сработало входное событие, но на домашней странице проекта есть запрос на удаление, который должен это исправить.
Финал
В качестве последнего примера, вы можете использовать Awesomplete вместе с данными, полученными из удаленного API через Ajax. Я буду использовать API стран REST , который предоставляет пользователям целый ряд данных по странам.
Первое, что нужно сделать, — это инициализировать виджет без установки его свойства списка (для краткости я здесь использую jQuery):
var input = $("#countries"); var awesomplete = new Awesomplete(input, { minChars: 1, autoFirst: true });
Затем присоедините прослушиватель событий keyup :
$(input).on("keyup", function(){ ... }
Когда пользователь нажал клавишу, нам нужно получить значение элемента ввода и сделать наш запрос:
$.ajax({ url: 'https://restcountries.eu/rest/v1/name/' + this.value, type: 'GET', dataType: 'json' })
В Awesomplete успеха мы можем перебрать ответ JSON, получить имена соответствующих городов и установить свойство списка объекта Awesomplete на лету:
.success(function(data) { var list = []; $.each(data, function(key, value) { list.push(value.name); }); awesomplete.list = list; });
Вот и все!
Вывод
В этом уроке мы увидели, как легко мы можем реализовать виджет автозаполнения в наших проектах, используя легкую и настраиваемую библиотеку Awesomplete. Проект все еще активно поддерживается, и я призываю вас проверить его.