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