jQuery Autocomplete

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

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

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

<link rel="stylesheet" href="themes/base/jquery.ui.all.css"> <script src="jquery-1.7.1.js"></script> <script src="ui/jquery.ui.core.js"></script> <script src="ui/jquery.ui.widget.js"></script> <script src="ui/jquery.ui.position.js"></script> <script src="ui/jquery.ui.autocomplete.js"></script>

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

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

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

 

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

<script type="text/javascript"> $(function() { var projects = [ { value: "shrek", label: "шрек, шрек", desc: "мультфильм шрек 2", icon: "shrek.jpg" }, { value: "рождественская история", label: "мультфильм рождественская история", desc: "мультфильм рождественская история", icon: "cristmas.jpg" }, { value: "ледниковый период", label: "мультфильм ледниковый период", desc: "мультфильм ледниковый период", icon: "lp.jpg" } , { value: "simpsoni", label: "симпсоны", desc: "описание, описание, описание...", icon: "simpsoni.jpg" } ]; $.each(projects,function(i,val){ $('<img />').hide().attr( "src", "images/" + val.icon ).appendTo('body'); }); $( "#project" ).autocomplete({ minLength: 0, source: projects, focus: function( event, ui ) { $( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.label ); $( "#project-id" ).val( ui.item.value ); $( "#project-description" ).html( ui.item.desc ); $( "#project-icon" ).fadeOut('slow',function(){ $(this).attr( "src", "images/" + ui.item.icon ).fadeIn('slow'); }); return false; } }) .data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) .appendTo( ul ); }; }); </script>

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

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

Весь код jQuery:

<script type="text/javascript"> <script> $(function() { function log( message ) { $( "<div/>" ).text( message ).prependTo( "#log" ); $( "#log" ).scrollTop( 0 ); } $( "#birds" ).autocomplete({ source: "sug/suggest.php", minLength: 2, select: function( event, ui ) { log( ui.item ? "Выбрано: " + ui.item.value + " aka " + ui.item.id : "Нет ничего подходящего " + this.value ); } }); }); </script>

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

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

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

<?php // подключаем конфигурационный файл require_once('config.php'); // класс серверной стороны создающий json объект для передачи jQuery class Suggest { // закрытая переменная - класс для работы с базой private $mMysqli; // конструктор класса function __construct() { // подключаемся к базе данных $this->mMysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE); } // деструктор function __destruct() { $this->mMysqli->close(); } // функция возвращающая json объект public function getSuggestions($keyword) { $patterns = array('/\s+/', '/"+/', '/%+/'); $replace = array(''); $keyword = preg_replace($patterns, $replace, $keyword); // запрос к базе if($keyword != '') $query = 'SELECT name ' . 'FROM jquery ' . 'WHERE name LIKE "' . $keyword . '%"'; else $query = 'SELECT name ' . 'FROM jquery ' . 'WHERE name=""'; // выполняем запрос SQL $result = $this->mMysqli->query($query); $output = '['; // результат формируется циклом if($result->num_rows) $i = 0; while ($row = $result->fetch_array(MYSQLI_ASSOC)) { $i++; if($i == 1) { $output .= '{ "id": "'.$row['name'].'", "label": "'.$row['name'].'", "value": "'.$row['name'].'"}'; } else { $output .= ',{ "id": "'.$row['name'].'", "label": "'.$row['name'].'", "value": "'.$row['name'].'"}'; } } // закрываем соединение и освобождаем ресурсы $result->close(); // закрывающий тег json формата $output .= ']'; // возвращаем данные return $output; } //конец класса } ?>

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

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

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

<script type="text/javascript"> <script type="text/javascript"> $(function() { function logxml( message ) { $( "<div/>" ).text( message ).prependTo( "#logxml" ); $( "#logxml" ).scrollTop( 0 ); } $.ajax({ url: "sug/suggestxml.php", dataType: "xml", success: function( xmlResponse ) { var data = $( "function", xmlResponse ).map(function() { return { value: $( "name", this ).text() }; }).get(); console.log(data) $( "#birdsxml" ).autocomplete({ source: data, minLength: 0, select: function( event, ui ) { logxml( ui.item ? "Selected: " + ui.item.value : "Nothing selected, input was " + this.value ); } }); } }); }); </script>

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

<?php // подключаем конфигурационный файл require_once('config.php'); // класс серверной стороны создающий json объект для передачи jQuery class SuggestXML { // закрытая переменная - класс для работы с базой private $mMysqliXML; // конструктор класса function __construct() { // подключаемся к базе данных $this->mMysqliXML = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE); } // деструктор function __destruct() { $this->mMysqliXML->close(); } // функция возвращающая json объект public function getSuggestions($keyword) { $patterns = array('/\s+/', '/"+/', '/%+/'); $replace = array(''); $keyword = preg_replace($patterns, $replace, $keyword); // запрос к базе $query = 'SELECT name ' . 'FROM jquery'; // выполняем запрос SQL $result = $this->mMysqliXML->query($query); // build the XML response $output = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>'; $output .= '<response>'; // if we have results, loop through them and add them to the output if($result->num_rows) while ($row = $result->fetch_array(MYSQLI_ASSOC)) $output .= '<function><name>' . $row['name'] . '</name></function>'; // close the result stream $result->close(); // add the final closing tag $output .= '</response>'; // return the results return $output; } //конец класса } ?>

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

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

<script type="text/javascript"> <script> $(function() { var cache = {}, lastXhr; $( "#birds" ).autocomplete({ minLength: 2, source: function( request, response ) { var term = request.term; if ( term in cache ) { response( cache[ term ] ); return; } lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) { cache[ term ] = data; if ( xhr === lastXhr ) { response( data ); } }); } }); }); </script>

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

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

<script type="text/javascript"> (function( $ ) { $.widget( "ui.combobox", { _create: function() { var self = this, select = this.element.hide(), selected = select.children( ":selected" ), value = selected.val() ? selected.text() : ""; var input = this.input = $( "<input>" ) .insertAfter( select ) .val( value ) .autocomplete({ delay: 0, minLength: 0, source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); response( select.children( "option" ).map(function() { var text = $( this ).text(); if ( this.value && ( !request.term || matcher.test(text) ) ) return { label: text.replace( new RegExp( "(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi" ), "<strong>$1</strong>" ), value: text, option: this }; }) ); }, select: function( event, ui ) { ui.item.option.selected = true; self._trigger( "selected", event, { item: ui.item.option }); }, change: function( event, ui ) { if ( !ui.item ) { var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ), valid = false; select.children( "option" ).each(function() { if ( $( this ).text().match( matcher ) ) { this.selected = valid = true; return false; } }); if ( !valid ) { // remove invalid value, as it didn't match anything $( this ).val( "" ); select.val( "" ); input.data( "autocomplete" ).term = ""; return false; } } } }) .addClass( "ui-widget ui-widget-content ui-corner-left" ); input.data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.label + "</a>" ) .appendTo( ul ); }; this.button = $( "<button type='button'> </button>" ) .attr( "tabIndex", -1 ) .attr( "title", "Show All Items" ) .insertAfter( input ) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass( "ui-corner-all" ) .addClass( "ui-corner-right ui-button-icon" ) .click(function() { // close if already visible if ( input.autocomplete( "widget" ).is( ":visible" ) ) { input.autocomplete( "close" ); return; } // work around a bug (likely same cause as #5265) $( this ).blur(); // pass empty string as value to search for, displaying all results input.autocomplete( "search", "" ); input.focus(); }); }, destroy: function() { this.input.remove(); this.button.remove(); this.element.show(); $.Widget.prototype.destroy.call( this ); } }); })( jQuery ); $(function() { $( "#combobox" ).combobox(); $( "#toggle" ).click(function() { $( "#combobox" ).toggle(); }); }); </script>

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

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

$( ".selector" ).autocomplete({ disabled: true });

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

//получить значение опции disabled var disabled = $( ".selector" ).autocomplete( "option", "disabled" ); //отключить плагин $( ".selector" ).autocomplete( "option", "disabled", true );

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

$( ".selector" ).autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });

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

$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });

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

$( ".selector" ).autocomplete({ delay: 0 }); $( ".selector" ).autocomplete({ minLength: 0 });

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

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

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

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

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

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

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

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

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

.autocomplete( "destroy" )

.autocomplete( "disable" )

.autocomplete( "enable" )

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

.autocomplete( "option" , options )

.autocomplete( "search" , [value] )

.autocomplete( "close" )

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