Script.aculo.us 简明教程

script.aculo.us - Auto Completion

默认情况下，script.aculo.us 支持两种自动完成来源 −

  1. 远程来源（通过 Ajax 获取），

  2. 本地来源（网页脚本中的字符串数组）。

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

在构建这些对象时，你始终会将以下四项传递给它们：

  1. 你想要使其自动完成的文本字段。按照惯例，你可以传递字段本身或其 id = 属性的值。

  2. 用于自动完成选项的容器，它将最终保存一个 <ul></li> 的选项选择列表。同样地，直接传递该元素或其 id = 。该元素最常见的是一个简单的 <div>.</p></li>

  3. 数据源，将根据源类型表达为一个字符串的 JavaScript 数组或一个指向远程源的 URL。

  4. 最后，这些选项。按照惯例，它们以一种哈希的形式提供，并且两个自动完成对象都可以使用自定义选项；所有内容都有合适的默认值。

为了使用 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>

Creating an Ajax Auto-Completer

构建语法如下 −

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

Ajax.Autocompleter 的构造函数接受四个参数 −

  1. 一个文本字段的元素名称或引用，是该字段将被数据选择填充的文本字段。

  2. 一个 <div> 元素的元素名称或引用，将由该控件用作一个选择菜单。

  3. 一个服务器端资源的 URL，它将提供这些选择。

  4. The usual options hash.

Options

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

Sr.No

Option & Description

1

paramName 包含发布到服务器端资源的文本字段内容的查询参数的名称。默认值为文本字段名称。

2

minChars 一个服务器端请求才能启动之前必须输入的字符数。默认为 1。

3

Frequency 以秒为单位的内部检查之间的时间间隔，用于查看是否应发布一个指向服务器端资源的请求。默认为 0.4。

4

Indicator 一个元素的 id 或引用，将显示它 while 一个指向服务器端资源的请求正在进行中。如果省略，则不会显示任何元素。

5

Parameters 一个包含将传递给服务器端资源的额外查询参数的文本字符串。

6

updateElement 一个回调函数，当用户选择服务器返回的一个选择时将触发该函数，它将替换使用所选值更新文本字段的内部函数。

7

afterUpdateElement 执行 updateElement 函数后将触发的回调函数。

8

Tokens 一个文本字符串或用于指示用作分隔符（允许在文本字段中输入多个元素，每个元素都可以单独自动完成）的文本字符串数组。

Example

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

这将生成以下结果：

本文档中讨论了不同选项。

Creating a Local Auto-Completer

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

主要区别在于如何识别用于自动完成的备用数据集。

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

整个构造语法实际上如下所示 −

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

自动完成器的构造函数接受四个参数：

  1. 一个文本字段的元素名称或引用，是该字段将被数据选择填充的文本字段。

  2. 1. 要由控件用作选项菜单的 <div> 元素的元素名称或引用

  3. 2. 对于第三个参数，而不是使用服务器辅助自动完成器的 URL，我们提供一个小字符串数组，其中包含所有可能的值。

  4. The usual options hash.

Options

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

Sr.No

Option & Description

1

Choices 要显示的选择数。默认为 10。

2

partialSearch 启用在完成字符串中嵌入的单词开头进行匹配。默认为真。

3

fullSearch 启用在完成字符串中的任何位置进行匹配。默认为假。

4

partialChars 定义在尝试进行任何部分匹配之前必须键入的字符数。默认为 2。

5

ignoreCase 在匹配时忽略大小写。默认为真。

Example

<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”之后，它将显示所有匹配的选项。

使用我们的在线编译器，更好地理解上面表格中讨论的各种选项的代码。

这将生成以下结果：