script.aculo.us — Автозаполнение

Изначально script.aculo.us поддерживает два источника автозаполнения:

• Удаленные источники (полученные через Ajax),
• Локальные источники (строковые массивы в скриптах вашей веб-страницы).

В зависимости от источника, который вы планируете использовать, вы будете создавать экземпляры Ajax.Autocompleter или Autocompleter.Local соответственно. Хотя эти два объекта оснащены специальными опциями, они имеют большой набор функций и обеспечивают единообразное взаимодействие с пользователем.

Есть четыре вещи, которые вы всегда будете передавать этим объектам при их создании —

• Текстовое поле, которое вы хотите сделать автозаполняемым. Как обычно, вы можете передать само поле или значение его атрибута id =.

• Контейнер для вариантов автозаполнения, который в конечном итоге будет содержать список параметров <ul> </ li> для выбора. Опять же, передайте элемент напрямую или его id = . Этот элемент чаще всего является простым <div>. </ P> </ li>

• Источник данных, который будет выражаться в зависимости от типа источника в виде массива строк JavaScript или в виде URL-адреса удаленного источника.

• Наконец, варианты. Как всегда, они предоставляются в виде своего рода хэша, и оба объекта автозаполнения могут обойтись без пользовательской опции; Есть подходящие значения по умолчанию для всего.

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

Контейнер для вариантов автозаполнения, который в конечном итоге будет содержать список параметров <ul> </ li> для выбора. Опять же, передайте элемент напрямую или его id = . Этот элемент чаще всего является простым <div>. </ P> </ li>

Источник данных, который будет выражаться в зависимости от типа источника в виде массива строк JavaScript или в виде URL-адреса удаленного источника.

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

Чтобы использовать возможности автозаполнения script.aculo.us, вам необходимо загрузить модули controls.js и effect.js вместе с модулем prototype.js. Итак, ваша минимальная загрузка для script.aculo.us будет выглядеть так —

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>

Создание автозаполнения Ajax

Синтаксис конструкции следующий:

new Ajax.Autocompleter(element, container, url [ , options ] )

Конструктор для Ajax.Autocompleter принимает четыре параметра:

• Имя элемента или ссылка на текстовое поле, которое должно быть заполнено выбором данных.

• Имя элемента или ссылка на элемент <div>, который будет использоваться элементом управления в качестве меню выбора.

• URL-адрес ресурса на стороне сервера, который будет предоставлять варианты выбора.

• Обычные варианты хэша.

Имя элемента или ссылка на текстовое поле, которое должно быть заполнено выбором данных.

Имя элемента или ссылка на элемент <div>, который будет использоваться элементом управления в качестве меню выбора.

URL-адрес ресурса на стороне сервера, который будет предоставлять варианты выбора.

Обычные варианты хэша.

Опции

При создании объекта Ajax.Autocompleter вы можете использовать один или несколько из следующих параметров.

ParamName

Имя параметра запроса, содержащего содержимое текстового поля, которое публикуется на сервере. По умолчанию используется имя текстового поля.

minChars

Количество символов, которое необходимо ввести до того, как запрос на выбор на стороне сервера может быть запущен. По умолчанию 1.

частота

Интервал (в секундах) между внутренними проверками, чтобы определить, следует ли публиковать запрос к серверному ресурсу. По умолчанию 0,4.

Индикатор

Идентификатор или ссылка на элемент, который будет отображаться во время выполнения запроса на стороне сервера. Если опущен, элемент не раскрывается.

параметры

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

updateElement

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

afterUpdateElement

Функция обратного вызова, запускаемая после выполнения функции updateElement.

Лексемы

Одна текстовая строка или массив текстовых строк, которые указывают маркеры, которые будут использоваться в качестве разделителей, чтобы можно было вводить несколько элементов в текстовое поле, каждое из которых может быть автоматически заполнено индивидуально.

пример

Live Demo

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.Autocompleter(
               'autoCompleteTextField',
               'autoCompleteMenu',
               '/script.aculo.us/serverSideScript.php', {}
            );
         }
      </script>
   </head>
   
   <body>
      <p>Type something in this box and then select suggested option from the list </p>

      <div>
         <label>Text field:</label>
         <input type = "text" id = "autoCompleteTextField"/>
         <div id = "autoCompleteMenu"></div>
      </div>
   </body>
</html>

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
   <li>Six</li>
</ul>

new Autocompleter.Local(field, container, dataSource [ , options ] );

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Autocompleter.Local(
               'autoCompleteTextField',
               'autoCompleteMenu',
               ['abcdef','abcdeg','xyzabcefg', 'tybabdefg','acdefg'],
               {ignoreCase:false}
            );
         }
      </script>
   </head>

   <body>
      <p>Type something in this box and then select suggested option from the list </p>
		
      <div>
         <label>Text field:</label>
         <input type = "text" id = "autoCompleteTextField"/>
         <div id = "autoCompleteMenu"></div>
      </div>		
   </body>
</html>