script.aculo.us - 自动完成

开箱即用，script.aculo.us 支持两种自动完成数据源：

远程数据源（通过 Ajax 获取），
本地数据源（网页脚本中的字符串数组）。

根据您计划使用的来源，您将分别实例化Ajax.Autocompleter 或Autocompleter.Local。尽管配备了特定选项，但这两种对象共享大量功能集并提供统一的用户体验。

构建这些对象时，您始终需要传入四项内容：

您想要启用自动完成的文本字段。通常，您可以传递字段本身或其id属性的值。
自动完成选项的容器，最终将包含一个<ul></li>选项列表供选择。同样，直接传递元素或其id=。此元素通常是一个简单的<div>。</p></li>
数据源，根据数据源类型，将表示为 JavaScript 字符串数组或远程数据源的 URL。
最后是选项。与往常一样，它们以某种散列的形式提供，并且两个自动完成对象都可以使用无自定义选项；所有内容都有合适的默认值。

要使用 script.aculo.us 的自动完成功能，您需要加载controls.js和effects.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。
通常的选项散列。

选项

创建 Ajax.Autocompleter 对象时，您可以使用以下一个或多个选项。

序号	选项及说明
1	paramName 包含发布到服务器端资源的文本字段内容的查询参数的名称。默认为文本字段的名称。
2	minChars 必须输入的字符数，之后才能发出对选项的服务器端请求。默认为 1。
3	Frequency（频率）内部检查是否应将请求发布到服务器端资源的间隔（秒）。默认为 0.4。
4	Indicator（指示器）正在进行服务器端选项请求时要显示的元素的 ID 或引用。如果省略，则不显示任何元素。
5	Parameters（参数）包含要传递到服务器端资源的额外查询参数的文本字符串。
6	updateElement 当用户选择从服务器返回的选项之一时触发的回调函数，该函数替换更新文本字段和所选值的内部函数。
7	afterUpdateElement 在执行 updateElement 函数后触发的回调函数。
8	Tokens（标记）单个文本字符串或文本字符串数组，指示用作分隔符的标记，以允许将多个元素输入文本字段，每个元素都可以单独自动完成。

示例

在线演示

<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>

现在，我们需要一个服务器端来访问此页面并提供数据源 URL (serverSideScript.php)。您需要完整的逻辑来在此脚本中显示建议。

例如，我们在serverSideScript.php中保留一个简单的 HTML 文本。您可以使用 CGI、PHP、Ruby 或任何其他服务器端脚本编写脚本，以选择合适的建议并将其格式化为<ul><li>...</li></ul>的形式，然后将其传递回调用程序。

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

这将产生以下结果：

使用上表中讨论的不同选项。

创建本地自动完成器

创建本地自动完成器与我们在上一节中讨论的创建 Ajax 自动完成器几乎相同。

主要区别在于如何确定要用于自动完成的支持数据集。

使用 Ajax 自动完成器，我们提供了服务器端资源的 URL，该资源将根据用户输入执行必要的过滤，并仅返回匹配的数据元素。使用本地自动完成器，我们改为提供完整的数据元素列表，作为 JavaScript 字符串数组，控件本身在其客户端代码中执行过滤操作。

整个构造语法实际上如下：

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

Autocompleter.Local 的构造函数接受四个参数：

要使用数据选项填充的文本字段的元素名称或引用。
用作控件选项菜单的<div>元素的元素名称或引用
对于第三个参数，我们不使用服务器辅助自动完成器中的 URL，而是提供一个小的字符串数组，其中包含所有可能的值。
通常的选项散列。

选项

创建 Autocompleter.Local 对象时，您可以使用以下一个或多个选项。

序号	选项及说明
1	Choices（选项）要显示的选项数。默认为 10。
2	partialSearch（部分搜索）启用在完成字符串中嵌入的单词开头进行匹配。默认为 true。
3	fullSearch（全文搜索）启用在完成字符串中的任何位置进行匹配。默认为 false。
4	partialChars（部分字符）定义在尝试任何部分匹配之前必须键入的字符数。默认为 2。
5	ignoreCase（忽略大小写）匹配时忽略大小写。默认为 true。

示例

在线演示

<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>

显示后，在文本框中输入字符“a”后，它将显示所有匹配的选项。

使用我们的在线编译器更好地理解使用上表中讨论的不同选项的代码。

这将产生以下结果：

打印页面