На этом шаге мы начнем рассматривать особенности использования виджета Autocomplete.
Материал этого шага базируется на http://www.linkexchanger.su/2011/700.html.
Расширение Autocomplete, написанное Йерном Зафферером (Jorn Zaefferer), одним из основных разработчиков библиотеки jQuery, обеспечивает вывод списка возможных дополнений текстовой строки по мере ее ввода пользователем.
Рассмотрим основные особенности использования этого виджета.
Сначала можно посетить страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется - отмечаем Autocomplete и видим, что вместе с ним отметились Core, Widget и Position. Работа виджета Autocomplete зависит от этих файлов.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив.
Итак, сначала в разделе HEAD потребуется подключить несколько файлов, которые есть в архиве.
<link href="css/ui-lightness/jquery-ui-1.10.0.custom.css" rel="stylesheet" /> <script src="js/jquery-1.9.0.js" type="text/javascript"></script> <script src="js/jquery-ui-1.10.0.custom.js" type="text/javascript"></script>
Сначала мы подключили файл стилевого оформления виджета, затем файл библиотеки jQuery. Третий подключенный файл необходим, чтобы реализовать Autocomplete.
Виджет Autocomplete не требует сложной HTML-разметки. Достаточно всего лишь поля для ввода текста, т.е. обычного элемента input, который имеет значение text в атрибуте type. Дополнительную разметку можно добавить, чтобы использовать стили в соответствии с выбранной темой оформления
<div class="ui-widget">
<label for="tags">Значение: </label>
<input id="tags" type="text" />
</div>
Для начала разберем самый простой случай использования виджета - когда для формирования списка подсказок используются локальные данные.
$(document).ready(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
});
});
Рис.1. Пример работы виджета
Полный текст этого примера можно взять здесь.В переменной availableTags приготовили массив с подсказками. Затем выбрали элемент input по его идентификатору и применили метод autocomplete, которому сразу передали объект с настройками. Пока этот объект с единственным свойством source, которое определяет источник данных. В нашем случае указан массив availableTags.
На самом деле мы можем немного поднастроить виджет, используя другие свойства объекта настроек. Вот список этих свойств:
- source - опция не имеет значения по умолчанию и должна быть обязательно определена. Значением опции может являться строка, массив или функция. В любом случае в этой опции должен быть указан источник данных.
- minLength - значение по умолчанию 1. В этой опции указывается количество символов, которое должно быть введено в поле ввода прежде, чем активизируются подсказки. Значение 0 полезно при использовании локальных данных при списках из нескольких позиций. Это значение должно быть увеличено при использовании запросов к серверу для получения данных и при использовании больших списков, где одному введенному символу может соответствовать несколько тысяч наименований.
- delay - значение по умолчанию 300. В этой опции указывается количество миллисекунд, которое должно пройти после нажатия очередной клавиши, чтобы активизировался запрос на получение данных. Нулевое значение имеет смысл при использовании локальных данных. При использовании запросов к серверу нулевое значение в этой опции может породить серьезную нагрузку.
- appendTo - значение по умолчанию 'body'. В качестве значения этой опции может быть использован селектор jQuery. Определяет, к какому элементу должен быть добавлен выпадающий список подсказок.
- disabled - значение по умолчанию false. Если установить значение true, то при инициализации функциональность виджета Autocomplete будет недоступна, однако может быть включена впоследствии, например, при выполнении какого-либо условия.
На следующем шаге мы продолжим изучение этого вопроса.
