为了实现一个花哨的自动搜索补全功能，故需要写js了，以前使用YUI的，现在希望找个轻量级的了，找到了jquery，go了很久才找到了我想要的，故在此记录下。
?
官方地址 ：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
?
?
转自：http://www.cnblogs.com/hyl8218/archive/2010/03/19/1688828.html
?
?
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（自动完成）代码片段：
?
?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参数为选中的数据。
?
一个稍微复杂的例子，可以自定义提示列表:
?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过的数据。
?
附加：http://www.jb51.net/article/22647.htm
?