Slyweb
На разработку сайта! Скидки 50%!

jQuery Autocomplete

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

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

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

  • Код
  • Чистый код
  1. <link rel="stylesheet" href="themes/base/jquery.ui.all.css">
  2. <script src="jquery-1.7.1.js"></script>
  3. <script src="ui/jquery.ui.core.js"></script>
  4. <script src="ui/jquery.ui.widget.js"></script>
  5.
  6. <script src="ui/jquery.ui.position.js"></script>
  7. <script src="ui/jquery.ui.autocomplete.js"></script>

        
Листинг 1.

Загрузить архивом файлы указанные в листинге № 1.

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

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

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


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

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2. $(function() {
  3. var projects = [
  4. {
  5. value: "shrek",
  6. label: "шрек, шрек",
  7. desc: "мультфильм шрек 2",
  8. icon: "shrek.jpg"
  9. },
10. {
11. value: "рождественская история",
12. label: "мультфильм рождественская история",
13. desc: "мультфильм рождественская история",
14. icon: "cristmas.jpg"
15. },
16. {
17. value: "ледниковый период",
18. label: "мультфильм ледниковый период",
19. desc: "мультфильм ледниковый период",
20. icon: "lp.jpg"
21. }
22. ,
23. {
24. value: "simpsoni",
25. label: "симпсоны",
26. desc: "описание, описание, описание...",
27. icon: "simpsoni.jpg"
28. }
29. ];
30.
31.$.each(projects,function(i,val){
32.$('<img />').hide().attr( "src", "images/" + val.icon ).appendTo('body');
33.});
34.
35. $( "#project" ).autocomplete({
36. minLength: 0,
37. source: projects,
38. focus: function( event, ui ) {
39. $( "#project" ).val( ui.item.label );
40. return false;
41. },
42. select: function( event, ui ) {
43. $( "#project" ).val( ui.item.label );
44. $( "#project-id" ).val( ui.item.value );
45. $( "#project-description" ).html( ui.item.desc );
46. $( "#project-icon" ).fadeOut('slow',function(){
47. $(this).attr( "src", "images/" + ui.item.icon ).fadeIn('slow');
48. });
49.
50. return false;
51. }
52. })
53. .data( "autocomplete" )._renderItem = function( ul, item ) {
54. return $( "<li></li>" )
55. .data( "item.autocomplete", item )
56. .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
57. .appendTo( ul );
58. };
59. });
60.</script>

        

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

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

Весь код jQuery:

  • Код
  • Чистый код
  1.<script>
  2. $(function() {
  3. function log( message ) {
  4. $( "<div/>" ).text( message ).prependTo( "#log" );
  5. $( "#log" ).scrollTop( 0 );
  6. }
  7. $( "#birds" ).autocomplete({
  8. source: "sug/suggest.php",
  9. minLength: 2,
10. select: function( event, ui ) {
11. log( ui.item ?
12. "Выбрано: " + ui.item.value + " aka " + ui.item.id :
13. "Нет ничего подходящего " + this.value );
14. }
15. });
16. });
17.</script>

        
Листинг 2.
Результат:

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

  • Код
  • Чистый код
  1.<?php
  2.// подключаем основной класс
  3.require_once('suggest.class.php');
  4.$suggest = new Suggest();
  5.// перменная $keyword - фраза для поиска
  6.$keyword = $_GET['term'];
  7.
  8.if(ob_get_length()) ob_clean();
  9.// заголовки необходимы для браузеров
10.header('Expires: Mon, 26 Jul 1997 05:00:00 GMT' );
11.header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT');
12.header('Cache-Control: no-cache, must-revalidate');
13.header('Pragma: no-cache');
14.header('Content-Type: text/json; charset=windows-1251;');
15.// отсылаем данные клиенту
16.echo $suggest->getSuggestions($keyword);
17.?>

        
Листинг 3.

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

  • Код
  • Чистый код
  1.<?php
  2.
  3.// подключаем конфигурационный файл
  4.require_once('config.php');
  5.
  6.// класс серверной стороны создающий json объект для передачи jQuery
  7.class Suggest
  8.{
  9. // закрытая переменная - класс для работы с базой
10. private $mMysqli;
11.
12. // конструктор класса
13. function __construct()
14. {
15. // подключаемся к базе данных
16. $this->mMysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD,
17. DB_DATABASE);
18. }
19.
20. // деструктор
21. function __destruct()
22. {
23. $this->mMysqli->close();
24. }
25.
26. // функция возвращающая json объект
27. public function getSuggestions($keyword)
28. {
29. $patterns = array('/\s+/', '/"+/', '/%+/');
30. $replace = array('');
31. $keyword = preg_replace($patterns, $replace, $keyword);
32. // запрос к базе
33. if($keyword != '')
34. $query = 'SELECT name ' .
35. 'FROM jquery ' .
36. 'WHERE name LIKE "' . $keyword . '%"';
37. else
38. $query = 'SELECT name ' .
39.
40. 'FROM jquery ' .
41. 'WHERE name=""';
42. // выполняем запрос SQL
43. $result = $this->mMysqli->query($query);
44.
45. $output = '[';
46. // результат формируется циклом
47. if($result->num_rows)
48. $i = 0;
49. while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
50. $i++;
51. if($i == 1) {
52. $output .= '{ "id": "'.$row['name'].'", "label": "'.$row['name'].'", "value": "'.$row['name'].'"}';
53. } else {
54. $output .= ',{ "id": "'.$row['name'].'", "label": "'.$row['name'].'", "value": "'.$row['name'].'"}';
55. }
56. }
57. // закрываем соединение и освобождаем ресурсы
58. $result->close();
59. // закрывающий тег json формата
60. $output .= ']';
61. // возвращаем данные
62. return $output;
63. }
64.//конец класса
65.}
66.?>

        
Листинг 4.

Загрузить архивом плагин jQuery Autocomplete.

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

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

Результат:

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

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2.$(function() {
  3. function logxml( message ) {
  4. $( "<div/>" ).text( message ).prependTo( "#logxml" );
  5. $( "#logxml" ).scrollTop( 0 );
  6. }
  7.
  8. $.ajax({
  9. url: "sug/suggestxml.php",
10. dataType: "xml",
11. success: function( xmlResponse ) {
12. var data = $( "function", xmlResponse ).map(function() {
13. return {
14. value: $( "name", this ).text()
15.
16. };
17. }).get();
18. console.log(data)
19. $( "#birdsxml" ).autocomplete({
20. source: data,
21. minLength: 0,
22. select: function( event, ui ) {
23.
24. logxml( ui.item ?
25. "Selected: " + ui.item.value :
26. "Nothing selected, input was " + this.value );
27. }
28. });
29. }
30. });
31. });
32. </script>
33.
34.

        
Листинг 5.

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

  • Код
  • Чистый код
  1.<?php
  2.
  3.// подключаем конфигурационный файл
  4.require_once('config.php');
  5.
  6.// класс серверной стороны создающий json объект для передачи jQuery
  7.class SuggestXML
  8.{
  9. // закрытая переменная - класс для работы с базой
10. private $mMysqliXML;
11.
12. // конструктор класса
13. function __construct()
14. {
15. // подключаемся к базе данных
16. $this->mMysqliXML = new mysqli(DB_HOST, DB_USER, DB_PASSWORD,
17. DB_DATABASE);
18. }
19.
20. // деструктор
21. function __destruct()
22. {
23. $this->mMysqliXML->close();
24. }
25.
26. // функция возвращающая json объект
27. public function getSuggestions($keyword)
28. {
29. $patterns = array('/\s+/', '/"+/', '/%+/');
30. $replace = array('');
31. $keyword = preg_replace($patterns, $replace, $keyword);
32. // запрос к базе
33.
34. $query = 'SELECT name ' .
35. 'FROM jquery';
36.
37. // выполняем запрос SQL
38. $result = $this->mMysqliXML->query($query);
39.
40.// build the XML response
41. $output = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
42. $output .= '<response>';
43. // if we have results, loop through them and add them to the output
44. if($result->num_rows)
45. while ($row = $result->fetch_array(MYSQLI_ASSOC))
46. $output .= '<function><name>' . $row['name'] . '</name></function>';
47. // close the result stream
48. $result->close();
49. // add the final closing tag
50. $output .= '</response>';
51. // return the results
52. return $output;
53. }
54.//конец класса
55.}
56.?>

        
Листинг 6.

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

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

  • Код
  • Чистый код
  1.<script>
  2. $(function() {
  3. var cache = {},
  4. lastXhr;
  5. $( "#birds" ).autocomplete({
  6. minLength: 2,
  7. source: function( request, response ) {
  8. var term = request.term;
  9. if ( term in cache ) {
10. response( cache[ term ] );
11. return;
12. }
13.
14. lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) {
15. cache[ term ] = data;
16. if ( xhr === lastXhr ) {
17. response( data );
18. }
19. });
20. }
21. });
22. });
23. </script>
24.

        
Листинг 7.
Результат:

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

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

  • Код
  • Чистый код
  1. <script type="text/javascript">
  2. (function( $ ) {
  3. $.widget( "ui.combobox", {
  4. _create: function() {
  5. var self = this,
  6. select = this.element.hide(),
  7. selected = select.children( ":selected" ),
  8. value = selected.val() ? selected.text() : "";
  9. var input = this.input = $( "<input>" )
10. .insertAfter( select )
11. .val( value )
12. .autocomplete({
13. delay: 0,
14. minLength: 0,
15. source: function( request, response ) {
16. var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
17. response( select.children( "option" ).map(function() {
18. var text = $( this ).text();
19. if ( this.value && ( !request.term || matcher.test(text) ) )
20. return {
21. label: text.replace(
22. new RegExp(
23. "(?![^&;]+;)(?!<[^<>]*)(" +
24. $.ui.autocomplete.escapeRegex(request.term) +
25. ")(?![^<>]*>)(?![^&;]+;)", "gi"
26. ), "<strong>$1</strong>" ),
27. value: text,
28. option: this
29. };
30. }) );
31. },
32. select: function( event, ui ) {
33. ui.item.option.selected = true;
34. self._trigger( "selected", event, {
35. item: ui.item.option
36. });
37. },
38. change: function( event, ui ) {
39. if ( !ui.item ) {
40. var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
41. valid = false;
42. select.children( "option" ).each(function() {
43. if ( $( this ).text().match( matcher ) ) {
44. this.selected = valid = true;
45. return false;
46. }
47. });
48. if ( !valid ) {
49. // remove invalid value, as it didn't match anything
50. $( this ).val( "" );
51. select.val( "" );
52. input.data( "autocomplete" ).term = "";
53. return false;
54. }
55. }
56. }
57. })
58. .addClass( "ui-widget ui-widget-content ui-corner-left" );
59.
60. input.data( "autocomplete" )._renderItem = function( ul, item ) {
61. return $( "<li></li>" )
62. .data( "item.autocomplete", item )
63. .append( "<a>" + item.label + "</a>" )
64. .appendTo( ul );
65. };
66.
67. this.button = $( "<button type='button'> </button>" )
68. .attr( "tabIndex", -1 )
69. .attr( "title", "Show All Items" )
70. .insertAfter( input )
71. .button({
72. icons: {
73. primary: "ui-icon-triangle-1-s"
74. },
75. text: false
76. })
77. .removeClass( "ui-corner-all" )
78. .addClass( "ui-corner-right ui-button-icon" )
79. .click(function() {
80. // close if already visible
81. if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
82. input.autocomplete( "close" );
83. return;
84. }
85.
86. // work around a bug (likely same cause as #5265)
87. $( this ).blur();
88.
89. // pass empty string as value to search for, displaying all results
90. input.autocomplete( "search", "" );
91. input.focus();
92. });
93. },
94.
95. destroy: function() {
96. this.input.remove();
97. this.button.remove();
98. this.element.show();
99. $.Widget.prototype.destroy.call( this );
100. }
101. });
102. })( jQuery );
103.
104.
105. $(function() {
106. $( "#combobox" ).combobox();
107. $( "#toggle" ).click(function() {
108. $( "#combobox" ).toggle();
109. });
110. });
111. </script>

        
Листинг 8.

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

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

  • Код
  • Чистый код
  1.$( ".selector" ).autocomplete({ disabled: true });
  2.

        
Листинг 9.

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

  • Код
  • Чистый код
  1.//получить значение опции disabled
  2.var disabled = $( ".selector" ).autocomplete( "option", "disabled" );
  3.//отключить плагин
  4.$( ".selector" ).autocomplete( "option", "disabled", true );
  5.

        
Листинг 10.

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

  • Код
  • Чистый код
  1.$( ".selector" ).autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });
  2.

        
Листинг 11.

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

  • Код
  • Чистый код
  1.$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
  2.

        
Листинг 12.

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

  • Код
  • Чистый код
  1.$( ".selector" ).autocomplete({ delay: 0 });
  2.$( ".selector" ).autocomplete({ minLength: 0 });
  3.

        
Листинг 13.

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


Александр Ермаков