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 对象时，可以使用以下一个或多个选项。

Sr.No	选项和说明
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 对象时，可以使用以下一个或多个选项。

Sr.No	选项和说明
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"后，会显示所有匹配的选项。

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

这将产生以下结果 −