Очень давно не писал ничего в блоге и вот наконец выбрал немного времени, чтобы рассказать о виджете Autocomplete, который был включен в состав jQuery UI – надстройки над JavaScript-библиотекой jQuery.

Виджет Autocomplete помогает организовать список подходящих значений при заполнении пользователем поля ввода.

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Autocomplete и видим, что вместе с ним отметились чекбоксы Core, Widget и Position. Работа виджета Autocomplete зависит от этих файлов.

Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив. Возможности виджета можно оценить в демо-галерее на сайте разработчика. Я лишь постараюсь по-русски и как можно более простым языком объяснить, как заставить все это работать.

Итак, сначала в разделе HEAD потребуется подключить несколько файлов, которые есть в архиве.

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>

Сначала мы подключили файл стилевого оформления виджета, затем файл библиотеки jQuery. Третий подключенный файл необходим, чтобы реализовать Autocomplete.

Виджет Autocomplete не требует сложной HTML-разметки. Достаточно всего лишь поля для ввода текста, т.е. обычного элемента input, который имеет значение text в атрибуте type. Дополнительную разметку можно добавить, чтобы использовать стили в соответствии с выбранной темой оформления.

<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" type="text" />
</div>

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

<script type="text/javascript">
$(function(){
  var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
  "C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
  "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
  "Python","Ruby","Scala","Scheme"];

  $("#tags").autocomplete({
    source: availableTags
  });
});
</script>

В переменной availableTags приготовили массив с подсказками. Затем выбрали элемент input по его идентификатору и применили метод autocomplete, которому сразу передали объект с настройками. Пока этот объект с единственным свойством source, которое определяет источник данных. В нашем случае указан массив availableTags.

На самом деле мы можем немного поднастроить виджет, используя другие свойства объекта настроек. Вот список этих свойств:

source – опция не имеет значения по умолчанию и должна быть обязательно определена. Значением опции может являться строка, массив или функция. В любом случае в этой опции должен быть указан источник данных.
minLength – значение по умолчанию 1. В этой опции указывается количество символов, которое должно быть введено в поле ввода прежде, чем активизируются подсказки. Значение 0 полезно при использовании локальных данных при списках из нескольких позиций. Это значение должно быть увеличено при использовании запросов к серверу для получения данных и при использовании больших списков, где одному введенному символу может соответствовать несколько тысяч наименований.
delay – значение по умолчанию 300. В этой опции указывается количество миллисекунд, которое должно пройти после нажатия очередной клавиши, чтобы активизировался запрос на получение данных. Нулевое значение имеет смысл при использовании локальных данных. При использовании запросов к серверу нулевое значение в этой опции может породить серьезную нагрузку
appendTo – значение по умолчанию ‘body’. В качестве значения этой опции может быть использован селектор jQuery. Определяет, к какому элементу должен быть добавлен выпадающий список подсказок.
disabled – значение по умолчанию false. Если установить значение true, то при инициализации функциональность виджета Autocomplete будет недоступна, однако может быть включена впоследствии, например, при выполнении какого-либо условия.

Дальше посмотрим, как виджет может реагировать на события.

<script type="text/javascript">
$(function(){
  var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
  "C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
  "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
  "Python","Ruby","Scala","Scheme"];
  $("#tags").autocomplete({
    source: availableTags,
    select: function(event, ui) {
      alert('Событие: ' + event.type +
            ',\nзначение: ' + ui.item.value);
    }
  });
});
</script>

Здесь мы добавили свойство select, где определили функцию, которая будет вызываться в тот момент, когда пользователь выберет какое-либо значение из списка подсказок. функция принимает два аргумента: первый — объект event, второй — специальный объект ui. Организовав доступ к свойствам этих объектов, можно получить полезную информацию (мы выводим ее в окне предупреждения).

Это не единственное событие на которое умеет реагировать виджет – вот полный их список, где указано название свойства в объекте с настройками, название события в event.type и описание события:

create – Событие autocompletecreate наступает в момент инициализации.
search – событие autocompletesearch наступает перед выполнением запроса. Если функция, определенная в этой опции вернет false, запрос не будет отправлен.
open – событие autocompleteopen наступает в момент, когда открывается выпадающий список подсказок.
focus – событие autocompletefocus наступает всякий раз, когда один из пунктов списка подсказок получает фокус.
select – событие autocompleteselect наступает, когда выбран один из пунктов списка подсказок.
close – событие autocompleteclose наступает, когда список подсказок закры-вается. Событие наступает независимо от того, был выбран один из пунктов или нет.
change – событие autocompletechange наступает после того, как выбран один из пунктов списка. Событие всегда наступает после close.

Есть у виджета и некоторые методы, с помощью которых можно еще более расширить его функциональность.

Для примера добавьте в HTML-разметку пару кнопок:

<button id="search">Искать "as"</button>
<button id="close">Закрыть</button>
<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" type="text" />
</div>

И вот такой JS-код:

<script type="text/javascript">
$(function(){
  var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
  "C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
  "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
  "Python","Ruby","Scala","Scheme"];
  $("#tags").autocomplete({
    source: availableTags,
    minLength: 0
  });
  $("#search").click(function(){
    $("#tags").autocomplete("search", "as");
  });
  $("#close").click(function(){
    $("#tags").autocomplete("close");
  });
});
</script>

Теперь, щелкая по кнопке Искать «as» мы можем имитировать действия пользователя, как если бы он ввел символы «as» в элементе input. Щелкнув по кнопке Закрыть – закрываем список подсказок, если он был открыт ранее.

Ниже приведены описания всех доступных методов:

destroy – .autocomplete( ‘destroy’ ) полностью удаляет всю функциональность виджета Autocomplete. Возвращает элементы в состояние, предшествующее инициализации.
disable – .autocomplete(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее можно с помощью метода enable.
enable – .autocomplete(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена методом disable.
option – .autocomplete(‘option’, optionName, [value]) с помощью этого метода можно установить значение любой опции виджета после инициализации.
option – .autocomplete(‘option’, optionName) с помощью этого метода можно получить значение любой опции виджета после инициализации.
widget – .autocomplete(‘widget’) с помощью этого метода можно получить доступ к объекту, который представляет собой элемент с функциональностью Autocomplete.
search – .autocomplete(’search, [value]‘) с помощью этого метода без передачи второго па-раметра можно открыть весь список. Если передать во втором параметре строку символов, то будет открыт список с подходящими подсказками.
close – .autocomplete(‘close’) закрывает список подсказок, если он был открыт ранее.

В общем теперь мы знаем как настраивать виджет и управлять им, но пока мы использовали исключительно локальные данные для формирования списка подсказок. Для изучения возможностей – подойдет, но для реальной работы – вряд ли. В реальной работе наверняка потребуется формировать подсказки из данных, хранящихся на своем сервере, а может быть и вообще не на своем

Опция source, которая, напомню, является обязательной и определяет источник данных, может принимать также строку, где содержится url, к которому следует отправлять запрос. А еще в source можно определить свою функцию, которая будет делать, то что надо именно Вам. Вот этот, пожалуй самый гибкий способ мы и разберем. Попробуем получить в виде списка подсказок какие-либо данные с сервера geonames.org

Я приведу полностью рабочий код и попробую разъяснить, как и что работает.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-8-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
.ui-autocomplete-loading {
  background: #FFF url('css/ui-lightness/images/ui-anim_basic_16x16.gif') right center no-repeat;
}
#city { width: 25em; }
#log { height: 200px; width: 600px; overflow: auto; }
</style>
<script type="text/javascript">
$(function() {
  $("#city").autocomplete({
    source: function(request,response) {
      $.ajax({
        url: "http://ws.geonames.org/searchJSON",
        dataType: "jsonp",
        data: {
          featureClass: "P",
          style: "full",
          maxRows: 12,
          name_startsWith: request.term
        },
        success: function(data) {
          response($.map(data.geonames, function(item) {
            return {
              label: item.name + ", " + item.countryName,
              value: item.name + " (" + item.countryName + ")" + " [" + item.lat + ", " + item.lng + "]"
            }
          }));
        }
      });
    },
    minLength: 3,
    select: function(event,ui) {
      $("<p/>").text(ui.item ? ui.item.value : "Ничего не выбрано!").prependTo("#log");
      $("#log").attr("scrollTop", 0);
    }
  });
});
</script>
</head>
<body>
<div class="ui-widget">
  <label for="city">Город: </label><input id="city" /><br />
  <span style="font-size:.8em;">Поддерживается <a href="http://geonames.org">geonames.org</a></span>
</div>
<div id="log" class="ui-widget ui-widget-content"></div>
</body>
</html>

Сначала смотрим на HTML-разметку. В первом элементе div нас интересует только элемент input с идентификатором city. Сюда будем вводить начальные буквы (на латинице) населенного пункта, информацию о котором мы хотели бы получить. Элемент div с идентификатором log используем для занесения в него полученной информации.

Если смотреть JavaScript-код, то увидим, что объект с настройками содержит три свойства — обязательное свойство source, а также свойства minLength и select.
Мы займемся рассмотрением только свойства source, где можно написать свою функцию. Эта функция принимает два аргумента. Первый аргумент — request — объект, содержащий единственное свойство term, в котором хранится строка, введенная пользователем в поле ввода. Второй аргумент — response — функция, с помощью которой будет обрабатываться полученный ответ.

Внутри функции, определенной в свойстве source мы имеем практически неограниченную свободу действий. А поэтому, не мудрствуя, пишем там ajax-запрос к url http://ws.geonames.org/searchJSON, в опции dataType указываем, что в ответе ожидаем получить данные в формате JSON. В опции data определяем объект с параметрами запроса, который будет отправляться на указанный url (почему параметры именно такие – надо смотреть документацию по API на сервере geonames.org). В последнем параметре передаем request.term – то, что ввел пользователь.

В следующей опции ajax-запроса – опции success, вызываем функцию обработки ответа response. В аргументе, который мы передаем этой функции, мы можем обрабатывать данные, полученные в ответе сервера так, как нам будет угодно. Мы используем метод $.map чтобы применить некоторую функцию к каждому элементу объекта, переданному в первом аргументе. Внутри функции мы можем обращаться к свойствам объекта — item.countryName, item.lng, item.lat (почему свойства именно такие – см. документацию по API, которую предоставляет веб-сервис). Функция, которую мы написали, для каждого элемента возвращает объект, содержащий два свойствами, которые мы определили самостоятельно, используя полученные данные. Из получившегося массива таких объектов и строится список подсказок.

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