autocomplete-jquery最强大的自动完成插件

这款自动完成插件委实太强大了。demo演示了不下于其5种特性。

• 自定义列表项的数据格式（格式化数据）
• 支持本地、远程数据搜索
• 拥有自定义事件
• 完美融合thickbox
• 完备的API和debug
• 支持多选
• 支持email自动完成

点此下载

(找不到其官方页面，我简要说明下其API，也是自己摸索的，不对的地方请指正。)

1. $("#suggest1").autocomplete(cities);

这是最简单的调用方式。接受唯一数据参数：cities（是个数组，详见demo文件夹下的localdata.js）。这是调用本地数据的例子。

1. $("#singleBirdRemote").autocomplete("search.php", {
2.         width: 260,
3.         selectFirst: false
4.     });

这是调用远程数据的例子。第一个参数为后台脚本路径。第二个为配置参数对象字面量。width:宽度，selectFirst:是否选中菜单第一个元素。

1. $("#month").autocomplete(months, {
2.         minChars: 0,
3.         max: 12,
4.         autoFill: true,
5.         mustMatch: true,
6.         matchContains: false,
7.         scrollHeight: 220,
8.         formatItem: function(data, i, total) {
9.             // don't show the current month in the list of values (for whatever reason)
10.             if ( data[0] == months[new Date().getMonth()] ) 
11.                 return false;
12.             return data[0];
13.         }
14.     });

这是调用本地数据的例子。重点来说明下其中的几个特殊有用的参数。

1. scrollHeight：菜单高度
2. autoFill：自动填充
3. formatItem:非常有意思的回调函数。作用是格式化菜单中的元素。例子中这个函数的作用是：不在列表菜单中显示当前月，起到了过滤的作用。

1. $("#suggest13").autocomplete(emails, {
2.         minChars: 0,
3.         width: 310,
4.         matchContains: true,
5.         autoFill: false,
6.         formatItem: function(row, i, max) {
7.             return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
8.         },
9.         formatMatch: function(row, i, max) {
10.             return row.name + " " + row.to;
11.         },
12.         formatResult: function(row) {
13.             return row.to;
14.         }
15.     });

这是自动完成email的例子。重点讲解下其回调函数。（这里的数据时各数组，数组的每个元素为对象字面量。）

1. formatItem：上一个例子有提到过，重点说明下其三个参数：row:一行数据({})，i:第几行，max:总行数。这里返回自定义格式的数据。
2. formatMatch：从名称来看为格式化匹配的回调函数。用法目前偶还不知。
3. formatResult：格式化结果。可以看到这里面但选择完后输入框显示的只是email，而没有列表中的名称+email