script.aculo.us 自动完成标记选项

介绍

在编写web应用的时候，自动完成输入框是一个非常实用的组件。script.aculo.us库提供了丰富的自动完成标记选项（Autocomplete）功能，帮助开发者能够快速便捷地创建这种组件。

使用

引入脚本

在HTML文件中引入自动完成标记选项的javascript文件以及样式文件：

<link rel="stylesheet" href="path/to/scriptaculous.css" type="text/css" />
<script type="text/javascript" src="path/to/prototype.js"></script>
<script type="text/javascript" src="path/to/scriptaculous.js"></script>
<script type="text/javascript" src="path/to/autocomplete.js"></script>

基本示例

在一个文本框中使用自动完成标记选项，首先需要创建一个AutoComplete对象并指定要自动完成的文本框：

new Autocomplete('my_textbox', {
  // 选项
});

我们可以通过在选项中传入一个数组来提供候选项：

new Autocomplete('my_textbox', {
  choices: ['Apple', 'Banana', 'Cherry']
});

更高级的示例

我们可以使用Ajax向服务器请求候选项：

new Ajax.Autocompleter('my_textbox', 'my_autocomplete_url', {
  // 选项
});

并且可以对选项进行自定义，例如在选中候选项后跳转到某个页面：

new Ajax.Autocompleter('my_textbox', 'my_autocomplete_url', {
  afterUpdateElement: function(element, selectedOption) {
    window.location.href = selectedOption.value;
  }
});

选项

选项可以在创建AutoComplete对象时作为第二个参数传入，以下是常用的选项：

• choices (Array) - 候选项数组。例如：['Apple', 'Banana', 'Cherry']
• partialSearch (Boolean) - 是否可以通过匹配候选项的任意部分来查找。默认为false。
• fullSearch (Boolean) - 是否匹配候选项的全文。默认为false。
• minChars (Integer) - 必须键入的最小字符数。当文本框中的字符数小于此值时，自动完成将不会启用。默认为1。
• frequency (Integer) - 发送Ajax请求的频率（毫秒）。默认为0，表示通过按下箭头或向上/向下键来触发Ajax请求，而不是自动触发。
• delay (Integer) - 发送Ajax请求之间的延迟（毫秒）。默认为250。
• paramName (String) - 传递给服务器的参数名称。默认为query。
• parameters (Object) - 传递给服务器的其他参数。例如：{category: 'fruit'}。
• callback (Function) - 每次自动完成后调用的函数。
• afterUpdateElement (Function) - 当用户选择候选项时调用的函数。默认为显示选项值。