juery auto complete

具体可以参考:

http://jqueryui.com/autocomplete/   

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

这是一个简单的例子

 1  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 2  < head  >
 3       < title > autocomplete </ title >
 4       < script  type ="text/javascript"  src ="/js/jquery.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                  $( ' #obj ' ).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 ="obj"   />
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过的数据。