<p>jQuery的Autocomplete（自动完成、自动填充）插件有不少，但比较下来我感觉，还是bassistance.de的JQuery Autocomplete plugin比较强大，我们就来写一些代码感受一下。</p><p></p><p>jquery-autocomplete配置：</p><p><script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script></p><p><script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script></p><p><link rel="Stylesheet" href="/js/jquery.autocomplete.css" /></p><p></p><p>首先是一个最简单的Autocomplete（自动完成）代码片段：</p><pre class="brush:html;toolbar:false">1<htmlxmlns="http://www.w3.org/1999/xhtml">
2<headrunat="server">
3<title>AutoComplate</title>
4<scripttype="text/javascript"src="/js/jquery-1.4.2.min.js"></script>
5<scripttype="text/javascript"src="/js/jquery.autocomplete.min.js"></script>
6<linkrel="Stylesheet"href="/js/jquery.autocomplete.css"/>
7<scripttype="text/javascript">
8$(function(){
9vardata="CoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities".split("");
10
11$('#keyword').autocomplete(data).result(function(event,data,formatted){
12alert(data);
13});
14});
15</script>
16</head>
17<body>
18<formid="form1"runat="server">
19<div>
20<inputid="keyword"/>
21<inputid="getValue"value="GetValue"type="button"/>
22</div>
23</form>
24</body>
25</html></pre><p>result方法是jQuery Autocomplete插件里的重要方法，它在用户在选定了某个条目时触发。data参数为选中的数据。</p><p></p><p>一个稍微复杂的例子，可以自定义提示列表:</p><pre class="brush:js;toolbar:false">1<htmlxmlns="http://www.w3.org/1999/xhtml">
2<headrunat="server">
3<title>自定义提示</title>
4<scripttype="text/javascript"src="/js/jquery-1.4.2.min.js"></script>
5<scripttype="text/javascript"src="/js/jquery.autocomplete.min.js"></script>
6<linkrel="Stylesheet"href="/js/jquery.autocomplete.css"/>
7<scripttype="text/javascript">
8varemails=[
9{name:"PeterPan",to:"peter@pan.de"},
10{name:"Molly",to:"molly@yahoo.com"},
11{name:"ForneriaMarconi",to:"live@japan.jp"},
12{name:"Master<em>Sync</em>",to:"205bw@samsung.com"},
13{name:"Dr.<strong>Tech</strong>deLog",to:"g15@logitech.com"},
14{name:"DonCorleone",to:"don@vegas.com"},
15{name:"McChick",to:"info@donalds.org"},
16{name:"DonnieDarko",to:"dd@timeshift.info"},
17{name:"QuakeTheNet",to:"webmaster@quakenet.org"},
18{name:"Dr.Write",to:"write@writable.com"},
19{name:"GGBond",to:"Bond@qq.com"},
20{name:"ZhuzhuXia",to:"zhuzhu@qq.com"}
21];
22
23$(function(){
24$('#keyword').autocomplete(emails,{
25max:12,//列表里的条目数
26minChars:0,//自动完成激活之前填入的最小字符
27width:400,//提示的宽度，溢出隐藏
28scrollHeight:300,//提示的高度，溢出显示滚动条
29matchContains:true,//包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
30autoFill:false,//自动填充
31formatItem:function(row,i,max){
32returni+'/'+max+':"'+row.name+'"['+row.to+']';
33},
34formatMatch:function(row,i,max){
35returnrow.name+row.to;
36},
37formatResult:function(row){
38returnrow.to;
39}
40}).result(function(event,row,formatted){
41alert(row.to);
42});
43});
44</script>
45</head>
46<body>
47<formid="form1"runat="server">
48<div>
49<inputid="keyword"/>
50<inputid="getValue"value="GetValue"type="button"/>
51</div>
52</form>
53</body>
54</html></pre><p>formatItem、formatMatch、formatResult是自定提示信息的关键。</p><p>formatItem作用在于可以格式化列表中的条目，比如我们加了"I"，让列表里的字显示出了斜体。</p><p>formatMatch是配合formatItem使用，作用在于，由于使用了formatItem，所以条目中的内容有所改变，而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据，</p><p>formatResult是定义最终返回的数据，比如我们还是要返回原始数据，而不是formatItem过的数据。</p><p></p>