转（Jquery AutoComplete的使用方法范例）

2012-10-20

转（Jquery AutoComplete的使用方法实例）为了实现一个花哨的自动搜索补全功能，故需要写js了，以前使用YUI的，

转（Jquery AutoComplete的使用方法实例）

为了实现一个花哨的自动搜索补全功能，故需要写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配置：

首先是一个最简单的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过的数据。

附加：http://www.jb51.net/article/22647.htm

热点排行

Web前端

转（Jquery AutoComplete的使用方法范例）