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:  " [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              $( 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过的数据。