Jquery AutoComplete的使用方法实例(网上找的留着备用)
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过的数据。
?