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过的数据。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值