Шаг 232.
Библиотека jQuery. Использование модулей расширения. Библиотека расширений jQuery UI. Формы. Виджет Autocomplete

    На этом шаге мы начнем рассматривать особенности использования виджета 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.

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

    На следующем шаге мы продолжим изучение этого вопроса.




Предыдущий шаг Содержание Следующий шаг