Jquery AutoComplete的简单实例

转自:http://www.cnblogs.com/hyl8218/archive/2010/03/19/1688828.html

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" />

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 = " CoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities " .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: " 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,{
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 >