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 (</span><span style="color: #0000ff; background-color: #f5f5f5">function</span><span style="color: #000000; background-color: #f5f5f5">() {<br></span><span style="color: #008080"> 9</span> <span style="color: #000000; background-color: #f5f5f5"> </span><span style="color: #0000ff; background-color: #f5f5f5">var</span><span style="color: #000000; background-color: #f5f5f5"> data </span><span style="color: #000000; background-color: #f5f5f5">=</span><span style="color: #000000; background-color: #f5f5f5"> </span><span style="color: #000000; background-color: #f5f5f5">"</span><span style="color: #000000; background-color: #f5f5f5">Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities</span><span style="color: #000000; background-color: #f5f5f5">"</span><span style="color: #000000; background-color: #f5f5f5">.split(</span><span style="color: #000000; background-color: #f5f5f5">"</span><span style="color: #000000; background-color: #f5f5f5"> </span><span style="color: #000000; background-color: #f5f5f5">"</span><span style="color: #000000; background-color: #f5f5f5">);<br></span><span style="color: #008080">10</span> <span style="color: #000000; background-color: #f5f5f5"><br></span><span style="color: #008080">11</span> <span style="color: #000000; background-color: #f5f5f5"> ( ’ #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: ” [email protected] ” },
10 { name: ” Molly ” , to: ” [email protected] ” },
11 { name: ” Forneria Marconi ” , to: ” [email protected] ” },
12 { name: ” Master <em>Sync</em> ” , to: ” [email protected] ” },
13 { name: ” Dr. <strong>Tech</strong> de Log ” , to: ” [email protected] ” },
14 { name: ” Don Corleone ” , to: ” [email protected] ” },
15 { name: ” Mc Chick ” , to: ” [email protected] ” },
16 { name: ” Donnie Darko ” , to: ” [email protected] ” },
17 { name: ” Quake The Net ” , to: ” [email protected] ” },
18 { name: ” Dr. Write ” , to: ” [email protected] ” },
19 { name: ” GG Bond ” , to: ” [email protected] ” },
20 { name: ” Zhuzhu Xia ” , to: ” [email protected] ” }
21 ];
22
23 (</span><span style="color: #0000ff; background-color: #f5f5f5">function</span><span style="color: #000000; background-color: #f5f5f5">() {<br></span><span style="color: #008080">24</span> <span style="color: #000000; background-color: #f5f5f5"> ( ’ #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過的資料。
![用jQuery實作一個簡易的聊天框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)