自动填充利用搜索和过滤，让用户快速找到并选择所需要的值。
当一个启动了自动填充功能的输入框得到焦点或者被输入值的时候，插件搜索匹配的选项并显示出来供用户选择。当输入更多的值的时候，可以得到更好的匹配结果。
这项功能可以用来输入刚刚选择的值，例如标签；或者输入一个地址、邮编，抑或从地址本里面输入邮件地址。
本地或者远程的数据都可作为自动填充的数据：当数据集较小的时候用本地数据比较好，例如具有50条数据左右的地址本；当数据量比较大的时候就需要远程数据了，比如要要从具有成千上万条的数据库中选择的时候。
下面就根据官方的文档一步一步地说明jqueryautocomplete插件的用法：
官方文档的下载地址为：
jQuery官方api地址：
(一)本地数据
解压之后在jquery-autocomplete /demo/localdata.js定义了3个数组，months,emails和cities，用来演示本地数据的自动填充。
函数签名：
autocomplete( url or data, [options])
利用这个函数可以让一个输入框或者文本域是可以自动填充的。
第一个参数可以是一个远程数据的URL，也可以是本地数组。对于远程数据：当用户输入数据的时候，一个请求被发送到指定的后台程序(比如"my_autocomplete_backend.php")，此请求包含两个get参数，一个名为“q”值为输入框的内容，一个为名为“limit”，值为配置选项中max的值。
如果输入的内容是foo，将会得到这样一个URL：
my_autocomplete_backend.php?q=foo&limit=10
结果必须一行返回一个值，结果的顺序将和后台返回的数据的顺序保持一致。
第二个参数是配置autocomplete的选项，参数形式为键值对，所有的选项都是可选的。
1.自动填充本地数据，没有配置选项
首先来看最简单的autocomplete，来看文档例子的第一段：
<form autocomplete="off">
<p>
<label>Single City (local):</label>
<input type="text" />
</p>
</form>
我们来看对应的js：
$().ready(function(){
$("#suggest1").focus().autocomplete(cities);
});
其中cities被定义为["Aberdeen","Ada", "Adamsville",…]类型的数组。如此当往id为suggest1的输入框输入内容的时候，cities中的内容就会被过滤，匹配的内容显示在下方供选择。这里autocomplete只有一个参数，就是本地的数组。
2.自动填充本地数据，，有配置选项
带配置项的autocomplete，看文档例子的第二段（这里省去的外面的form）：
<p>
<label>Month(local):</label>
<inputtype="text" />
</p>
看对应的js：
$().ready(function(){
$("#month").autocomplete(months,{
minChars: 0,
max: 12,
autoFill: true,
mustMatch: true,
matchContains: false,
scrollHeight: 220,
formatItem: function(data, i,total) {
// don’t show thecurrent month in the list of values (for whatever reason)
if ( data[0] ==months[new Date().getMonth()] )
returnfalse;
return data[0];
}
});});
首先来看months的定义：
var months =[‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’, ‘August’,’September’, ‘October’, ‘November’, ‘December’];
然后看配置选项：
1)minChars (Number):在触发autoComplete前用户至少需要输入的字符数.Default: 1，如果设为0，在输入框内双击或者删除输入框内内容时显示列表
2)max (Number):autoComplete下拉显示项目的个数.Default: 10，由于月份只有12个，这里定义为12。
3)autoFill (Boolean):要不要在用户选择时自动将用户当前鼠标所在的值填入到输框.Default: false
4)mustMatch (Booolean): 如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false
5)matchContains (Boolean): 决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false
6)scrollHeight (Number): 自动完成提示的卷轴高度用像素大小表示 Default: 180
7)formatItem (Function): 为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中. Autocompleter会提供4个参数(row, i, max,value): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数,最后一个是查询到的项. Default: none,表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.
这样就很容易可以看懂第二段了。
3.自动填充本地数据，格式化显示和结果
配置项复杂的autocomplete，看文档例子的第三段：
<p>
<label>E-Mail(local):</label>
<input type="text" />
<input type="button"value="Get Value" />
</p>
对应的js：
$("#email").autocomplete(emails,{
minChars:0,
width:310,
matchContains:"word",
autoFill:false,
formatItem:function(row, i, max) {
returni + "/" + max + ": \&;" + row.name + "\&;[" + row.to + "]";
},
formatMatch:function(row, i, max) {
returnrow.name + " " + row.to;
},
formatResult:function(row) {
returnrow.to;
}
});
首先来看emails的定义：
var emails = [
{ name: "PeterPan", to: "peter@pan.de" },
{ name:"Molly", to: "molly@yahoo.com" },
{ name: "ForneriaMarconi", to: "live@japan.jp" },
{ name: "Master<em>Sync</em>", to: "205bw@samsung.com" },
{ name: "Dr.<strong>Tech</strong> de Log", to:"g15@logitech.com" },
{ name: "DonCorleone", to: "don@vegas.com" },
{ name: "McChick", to: "info@donalds.org" },
{ name: "DonnieDarko", to: "dd@timeshift.info" },
{ name: "QuakeThe Net", to: "webmaster@quakenet.org" },
{ name: "Dr.Write", to: "write@writable.com" }
];
emails的定义稍微复杂一些，可以看做数组的数组。
然后看配置选项：
1)前2个选项和前面基本相同， matchContains的配置和前面不同，这里的配置为“word”，即为true，表示可以是包含关系。autoFill为false表示不自动把鼠标所在的行填充到输入框。
2)formatItem对返回结果的每一行做了处理。每一行都被处理成了这样的一种形式：i/max:”name”[to],例如第一个被表示成：1/10: "Peter Pan"[ peter@pan.de]
3)formatMatch对每一行数据使用此函数格式化需要查询的数据格式.返回值是给内部搜索算法使用的. 参数值和formatItem的参数一样。
4)formatResult和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default:none,表示要么是只有数据,要么是使用formatItem提供的值.
4.自动填充本地数据，多项选择，用分隔符分隔
<p>
<label>Tags(local):</label>
<inputtype="text" />
</p>
对应js：
上天完全是为了坚强你的意志，才在道路上设下重重的障碍。
