jQuery Autocomplete

Опубликовано admin - ср, 02/01/2012 - 18:16

В переводе с английского "autocomplete" означает автозавершение (автодополнение), в нашем случае это автозавершение искомых пользователем данных. Согласитесь удобно, когда пользователь набирает не всю фразу для поиска а первые два символа или слова, а остальные добавляются автоматически. Более того, любой сайт должен поддерживать функции autocomplete везде, где это возможно, чтобы облегчить жизнь пользователя! Для этого предназначен плагин jQuery Autocomplete, который поддерживает следующие виды данных для загрузки и автозавершения:

  • jQuery Autocomplete с XML
  • jQuery Autocomplete с JSON
  • jQuery Autocomplete с массивом

 

Указанные типы данных не обязательно должны возвращаться серверным скриптом, он могут находиться на той же странице с jQuery скриптом, либо является объектом javascript. Но, сперва нужно подключить библиотеки jQuery и css. Для всех последующих примеров jQuery Autocomplete подключается с помощью следующих файлов:

jQuery Autocomplete с выводом пользовательских изображений

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

Напечатайте название мультфильма (начинающееся с "Ш","С","Р") и выбирите


 

Для работы этого примера нужен простой jQuery скрипт: 

Самый простой вариант jQuery Autocomplete

Самый удобный, на мой взгляд, вариант autocomplete - с поиском и загрузкой данных из базы myqsl! Данный вариант указан на официальном сайте jQuery первым из примеров.

Весь код jQuery:

Результат:
 

В даном примере все запросы плагина поступают в php скрипт "sug.php", который приведён ниже: 

 

Скрипт "sug.php" формирует правильные заголовки овтета и возвращает его в формате json, заголовки необходимо указывать для явного указания типа возращаемого обекта и его кодировки. Данные, которые возвращает скрипт "sug.php", формируются классом "Suggest" в файле "suggest.class.php" в формате json (все файлы можно сказачать чуть ниже одним архивом):

jQuery Autocomplete с ajax загрузкой данных в формате XML

Пример указанный выше рассчитан на получение данных в формате json, однако допустимы и другие форматы. Пример jQuery Autocomplete в котором используется xml.

Результат:
 

Для этого необходимо внести небольшие изменения в скрипт, возвращающей ответ в формате XML и в скрипт jQuery. Такой вид Auocomplete имеет существенный недостаток - большие объёмы данных не следует выводить через XML и AJAX так как это сильно замедляет работу скриптов на странице.

jQuery скрипт мы изменили, но не забудем внести изменения в php скрипт на серверной стороне, который не сильно отличается от примера с json форматом, указанным чуть выше. Принцип такой - нам нужно вернуть данные в определенном формате, - сейчас в формате xml, что и делает класс "suggestXml", при этом данные могут возвращаться из любой базы, либо из файла xml и т.д.:

Пример jQuery Autocomplete с результатом, сохранённым в кэш.

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

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

Ещё одна разновидность jQuery Autocomplete, - поиск по массиву javascript

Опции, настройки, методы jQuery Autocomplete.

С основными примерами я думаю разобрались давайте посмотрим на примеры с дополнительными настройками jQuery Autocomplete. С jQuery Autocomplete можно отключать и включать, уничтожать, реагировать на события плагина, например при нажатии пользователем определенной кнопки, для этого предназначена опция disabled:

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

Следующей опцией, которую нельзя не рассмотреть - это опция source. Используется она для того, чтобы передать данные, в которых будет осуществляться поиск фраз, как было указано выше - это три следующих формата: xml, javascript, json.

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

Опция "minLength" задаёт количество минимально-вводимых символов после которых будет осуществлён поиск среди данных. Для больших объёмов данных рекомендуется устанавливать это значение не меньше 2 - 3 символов. Опция "delay" устанавливает промежуток времени, по истечении которого появится результат работы плагина jQuery Autocomplete. Примеры указанных опций:

Помимо опций плагин jQuery Autocmplete поддерживает различные события (события – это объекты, на которые реагирует javascript с помощью функций обработчиков):

Cобытия плагина Autocomplete:

create (Срабатывает в момент создания плагина.)

Обработчик события create. Срабатывает в момент создания плагина. В функцию передаются объект и само событие.

 

$( ".selector" ).autocomplete({
   create: function(event, ui) { ... }
});

 

search (Срабатывает до момента отправки запроса к данным)

Обработчик события search. Срабатывает до момента отправки запроса к данным, среди которых осуществляется поиск, но после выполнения проверки значения minLength.

 

$( ".selector" ).autocomplete({
   search: function(event, ui) { ... }
});

 

open (Срабатывает во время открытия меню с результатами поиска)

Обработчик события open. Срабатывает во время открытия меню с результатами поиска.

 

$( ".selector" ).autocomplete({
   open: function(event, ui) { ... }
});

 

focus(Событие focus срабатывает во время перехода к активному элементу)

Обработчик события focus. Событие focus срабатывает во время перехода к активному элементу, найденному в данных.

 

$( ".selector" ).autocomplete({
   focus: function(event, ui) { ... }
});

 

select(Событие select срабатывает во время помещения выбранного элемента в поле input)

Обработчик события select. Событие select срабатывает во время помещения выбранного элемента в поле input.

 

$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});

 

close(Событие close срабатывает во время закрытия поля с результатами)

Обработчик события close. Событие close срабатывает во время закрытия поля с результатами.

 

$( ".selector" ).autocomplete({
   close: function(event, ui) { ... }
});

 

Методы плагина Autocomplete:

destroy (Полностью удаляет плагин jQuery Autocomplete.)

Метод полностью удаляет плагин jQuery Autocomplete

 

.autocomplete( "destroy" )

 

disable (Метод отключает плагин jQuery Autocomplete)

Метод отключает плагин jQuery Autocomplete

 

.autocomplete( "disable" )

 

enable (Метод включает плагин jQuery Autocomplete)

Метод включает плагин jQuery Autocomplete

 

.autocomplete( "enable" )

 

option(Метод option предназначен для установки и получения опций плагина)

Метод option предназначен для установки и получения опций плагина

 

.autocomplete( "option" , optionName , [value] )

 

option(Метод option предназначен для установки и получения опций плагина)

Метод option предназначен для установки и получения опций плагина

 

.autocomplete( "option" , options )

 

search(Метод search осуществляет поиск)

Обработчик события close. Метод search осуществляет поиск.

 

.autocomplete( "search" , [value] )

 

close(Метод close скрывает меню)

Обработчик события close. Метод close скрывает меню.

 

.autocomplete( "close" )

 

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

Взаимосвязанные материалы

# 1. О сайте (суббота, июля 6, 2019 - 21:51 ),

Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.

На сегодняшний день slyweb.ru представляет следующие услуги:

читать...
# 2. Как написать первый плагин на jQuery, с использованием ajax? (воскресенье, июня 3, 2018 - 10:52 ),

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

# 3. jQuery для начинающих! (пятница, июня 1, 2018 - 21:28 ),

Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?". читать...

# 4. jQuery - самое нужное! Карусель! (воскресенье, мая 20, 2018 - 19:22 ),

Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель. читать...

# 5. Аудио плеер на основе HTML5 и jQuery (вторник, апреля 17, 2018 - 19:23 ),

Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.

Плеер будет поддерживать следующие функции:

читать...
На разработку сайта! Скидки до 20%!