В этом уроке мы подробно рассмотрим виджет 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 файле нам нужно подключить все необходимые библиотеки и файлы:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>jQuery UI</title> <!-- Подключаем файл стилей библиотеки jQuery UI --> <link rel="stylesheet" href="./scripts/jquery-ui-1.12.1/jquery-ui.min.css"> <!-- Подключаем наш файл стилей --> <link rel="stylesheet" href="./css/main.css"> </head> <body> <!-- Здесь будет форма, с которым будем в дальнейшем работать --> <!-- Подключаем библиотеку jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Подключаем библиотеку jQuery UI --> <script src="./scripts/jquery-ui-1.12.1/jquery-ui.min.js"></script> <!-- Подключаем наш файл скриптов --> <script src="./scripts/main.js"></script> </body> </html>
Создание виджета Autocomplete
После подготовительных работ мы можем приступать к созданию Autocomplete виджета. Для создание элемента автозаполнения библиотека jQuery UI представляет метод .autocomplete(), который нужно вызвать для текстового инпута.
HTML — index.html:
<form action="#" method="post">
<label for="myInput">Форма поиска:</label>
<input id="myInput" type="text" name="search">
</form>
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 запросы по этому адресу, чтобы получить список данных с сервера.
Комментарии