Advertisement
  1. Code
  2. Web Development
Code

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

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Nadia Gonzales (you can also view the original English article)

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

Я не являюсь ярым поклонником Facebook, мне намного больше нравится Twitter (кстати, @danwellman), однако одна из возможностей Facebook, которая мне действительно нравится, – обмен сообщениями, благодаря которой вы можете отправлять сообщение другу или друзьям. Мне нравится, как в этой сети используется возможность автозаполнения для облегчения ввода имен ваших друзей и как форматируются имена сразу после выбора и добавления в поле 'to', например: у каждого имени имеется ссылка close (* закрыть. Здесь и далее примеч. пер.), за счет которой имя можно легко удалить без необходимости выбора какого-либо текста.

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


Шаг 1: Начало работы

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

  • Core
  • Widget
  • Position

Также нам будет необходим сам виджет Autocomplete, так что убедитесь, что в разделе Components слева отмечены как вышеперечисленные компоненты, так и Autocomplete. Используйте тему по умолчанию (UI Lightness) и убедитесь, что справа выбрана версия 1.8.

Сразу после скачивания создайте новую папку на вашем компьютере и назовите ее autocomplete. Затем откройте архив и скопируйте папки css и js в только что созданную вами папку. После этого у вас будут иметься все необходимые для нашего примера файлы библиотеки, включая файл самой jQuery, так что его не нужно скачивать отдельно.


Шаг 2: HTML–код, на основе которого будем работать с виджетом

Давайте рассмотрим в первую очередь код HTML <form>:

Это довольно стандартная форма; у нас имеется внешний контейнер <div>, который мы можем использовать для оформления формы, и <input>, к которому будет подключен Autocomplete, внутри элемента <div>; мы зададим стилевое оформление для <input> таким образом, что он будет отчасти скрыт, и для <div> так, что он будет выглядеть подобно остальным полям формы. Мы задаем для контейнера <input> имя класса ui-helper-clearfix, чтобы воспользоваться этим вспомогательным классом во фреймворке CSS jQuery UI.

Также нам необходимо добавить ссылки на файлы, которые мы извлекли из архива jQuery UI, а также на нашу таблицу стилей; следующие ссылки должны располагаться в теге <head> страницы:

Следующие ссылки должны располагаться в конце тега  <body>:


Шаг 3: Задаем стилевое оформление для формы

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

Для того чтобы получить замечательную прозрачную границу формы со скругленными углами мы используем правило RGBa CSS3 и правила -moz-border-radius, -webkit-border-radius и border-radius; большинство популярных браузеров (включая Firefox, Safari, Chrome и Opera) сейчас поддерживают эти правила. IE не поддерживает никакие из них (* сейчас (2018) уже поддерживает), и хотя можно воспользоваться свойством filter для реализации простейшей прозрачности, для реализации скругленных углов нужно будет использовать изображения. В этом примере потенциал прозрачности RGBa далеко не раскрыт; однако этот тип формы в своей полной реализации скорее всего использовался бы в качестве компонента модального окна (* блокирует взаимодействие пользователя с приложением, инициирующим диалог; в графическом интерфейсе пользователя (GUI) - дочернее окно (child window) для взаимодействия пользователя с приложением: оно служит для получения информации от приложения или для ввода запрашиваемых данных и выбора опций; поэтому модальное окно часто называется диалоговым (dialog box, modal dialog). Если открывается модальное окно, то возврат управления приложению может произойти только после реакции пользователя. B Windows могут открываться только модальные окна, относящиеся к одному и тому же приложению;), которое располагалось бы поверх собственно содержимого страницы.

Для контейнера <div> вокруг поля <input>, к которому будет подключено текстовое поле Autocomplete, задано такое же позиционирование и стилевое оформление, как и для элементов <input>, однако у <input> внутри этого контейнера удалена граница таким образом, что он скрыт. Также мы сужаем его ширину и задаем значением его свойства float left. Это делается для того, чтобы при добавлении отформатированных имен получателей к <div> <input>  не переполнял и не увеличивал высоту <div> без надобности.

Также мы задаем стилевое оформление для имен получателей, которые будут добавляться к <div> в качестве элементов <span>, содержащих ссылку. Их оформление в целом задано таким образом, чтобы соответствовать оформлению базовой теме, а также для них заданы скругленные углы. Важно, что эти элементы являются блочными и плавающими, благодаря чему они корректно выстраиваются. Также нам необходимо переписать некоторые правила стилевого оформления Autocomplete, применяемые от темы jQuery UI, которую используем; благодаря последнему селектору просто предотвращается переход слов отдельных предложений в меню на новую строку (* текст располагается на одной и той же линии, пока не встретится тег <br>), что происходит из-за того, что мы сделали <input>, с которым они связаны, очень небольшим.

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


Шаг 4: Подключаем Autocomplete

Далее нам необходимо подключить к <input> внутри <div> виджет Autocomplete; для этого мы можем использовать следующий скрипт:

Виджет подключается к <input> при помощи метода autocomplete(). Мы предоставляем литерал объекта в качестве аргумента для метода, в котором происходит настройка опции source и обработчиков для событий select и change.

Опция source используется для сообщения виджету, откуда брать предложения для меню Autocomplete. Мы используем в качестве значения этой опции функцию, которая принимает два аргумента: первый – буква, введенная в <input>, второй – функция обратного вызова, которая используется для возвращения предложений обратно виджету.

В этой функции мы используем метод jQuery's getJSON() для передачи буквы файлу PHP на серверной стороне. В файле PHP буква будет использоваться для извлечения подходящих вариантов получателей из базы данных MySql. Мы используем функцию обратного вызова JSONP (* JSON with Padding, или JSON-P – JSON с набивкой; дополнение к базовому формату JSON. Он предоставляет способ запросить данные с сервера, находящегося на другом домене — операцию, запрещённую в типичных веб-браузерах из-за политики ограничения домена) для обработки возвращенных сервером данных; для функции обратного вызова, которую передаем в качестве второго аргумента в опцию source, необходимо, чтобы данные передавались в виде массива, так что мы сначала создаем пустой массив и затем используем метод each() jQuery для обработки каждого элемента в массиве JSON, возвращенном сервером. Мы просто проводим итерацию по всем элементам в этом массиве и добавляем каждое предложение в наш новый массив. Сразу после создания нашего нового массива мы передаем его в функцию обратного вызова, чтобы виджет отобразил его элементы в меню.

Далее мы определяем обработчик для собственного события Autocomplete select; эта функция будет выполняться виджетом каждый раз при выборе предложения из меню Autocomplete. В эту функцию автоматически передаются два параметра: объект события и объект ui, содержащий выбранное пользователем предложение. Мы используем эту функцию для форматирования имени получателя и добавления его к <div>. Мы просто создаем элемент <span> для помещения текста и якорь, который можно использовать для удаления имени получателя. После создания отформатированного получателя мы просто вставляем его сразу перед замаскированным <input>.

Наконец, мы добавляем обработчик для события change; эта функция будет вызываться каждый раз при изменении значения <input>, к которому подключен Autocomplete. Мы просто используем ее для удаления значения из <input>, поскольку мы уже добавили отформатированную версию имени получателя к нашему контейнеру <div>. Курсор выглядит немного высоковато после добавления отформатированного имени получателя к <div>, поэтому мы также используем этот обработчик, чтобы подкорректировать этот момент.

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

Элемент <input>, к которому подключен наш виджет Autocomplete, частично скрыт, и его контейнер <div> оформлен таким образом, что выглядит, как и другие поля формы; для удачного осуществления нашей уловки мы добавляем обработчик события click к контейнеру <div> таким образом, что при нажатии где-либо внутри него  фокус переходит собственно к <input>. Визуально и функционально <div> теперь должен быть неотличимым от обычного поля.

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


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

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

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

В этом руководстве было показано, как сымитировать форму Facebook для отправки сообщений, а именно: способ добавления друзей в качестве получателей к форме для отправки сообщений при помощи Autocomplete и метод форматирования имен друзей сразу после их добавления таким образом, что их можно легко удалить. Форма нашего примера собственно ничего не делает, но для того, чтобы на самом деле отправить форму, нам потребовалось бы передать содержимое формы файлу на сервере при помощи запроса AJAX (* Asynchronous JavaScript And XML – асинхронный JavaScript + XML), который можно легко добавить в обработчике для события submit, которое генерируется при нажатии кнопки для отправки формы.

Имена получателей должны были бы, конечно же, как-то опознаваться серверной частью приложения, и вероятно были бы привязаны к адресам электронной почты, хранящимся в базе данных. Нам потребовалось бы получить текстовое содержимое всех элементов <span> перед отправкой данных на сервер, хотя с этим проблем возникнуть не должно было бы.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.