jQuery 入门教程(23): jQuery UI Autocomplete示例(一)



AutoComplete 在获取焦点后,随着用户键入的内容,可以在预订的数据源中查找和已输入的内容相匹配的内容列表供用户选择。
这可以用作之前输入过的内容也可以用作自动填充相关内容,比如根据城市名,自动填充邮编等。
你可以使用本地数据源或是远程数据源,本地数据一般使用小数据集合,比如包含50条记录的通讯录,远程数据源一般为保护大量记录的数据库。
基本用法
本例为使用AutoComplete的基本用法,通过本地数据源(数组)定义一组语言列表,用户输入字母后,包含该字母的语言会作为列表显示出来:

1 <!doctype html>
2 <html lang="en">
3 <head>
4     <meta charset="utf-8" />
5     <title>jQuery UI Demos</title>
6     <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
7     <script src="scripts/jquery-1.9.1.js"></script>
8     <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
9  
10     <script>
11         $(function () {
12             var availableTags = [
13               "ActionScript",
14               "AppleScript",
15               "Asp",
16               "BASIC",
17               "C",
18               "C++",
19               "Clojure",
20               "COBOL",
21               "ColdFusion",
22               "Erlang",
23               "Fortran",
24               "Groovy",
25               "Haskell",
26               "Java",
27               "JavaScript",
28               "Lisp",
29               "Perl",
30               "PHP",
31               "Python",
32               "Ruby",
33               "Scala",
34               "Scheme"
35             ];
36             $("#tags").autocomplete({
37                 source: availableTags
38             });
39         });
40     </script>
41 </head>
42 <body>
43     <div class="ui-widget">
44         <label for="tags">Tags: </label>
45         <input id="tags" />
46     </div>
47 </body>
48 </html>

20130316001

语调支持
某些语言支持语调字符,比如Jörn 中的ö,希望在输入o时,也能显示包含ö的内容,AutoComplete支持使用function来定义Source属性:

1 <!doctype html>
2 <html lang="en">
3 <head>
4     <meta charset="utf-8" />
5     <title>jQuery UI Demos</title>
6     <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
7     <script src="scripts/jquery-1.9.1.js"></script>
8     <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
9  
10     <script>
11         $(function () {
12             var names = ["Jörn Zaefferer",
13                 "Scott González",
14                 "John Resig"];
15  
16             var accentMap = {
17                 "á": "a",
18                 "ö": "o"
19             };
20             var normalize = function (term) {
21                 var ret = "";
22                 for (var i = 0; i < term.length; i++) {
23                     ret += accentMap[term.charAt(i)]
24                         || term.charAt(i);
25                 }
26                 return ret;
27             };
28  
29             $("#developer").autocomplete({
30                 source: function (request, response) {
31                     var matcher
32                         new RegExp($.ui.autocomplete
33                             .escapeRegex(request.term),"i");
34                     response($.grep(names, function (value) {
35                         value = value.label
36                             || value.value
37                             || value;
38                         return matcher.test(value)
39                             || matcher.test(normalize(value));
40                     }));
41                 }
42             });
43         });
44     </script>
45 </head>
46 <body>
47     <div class="ui-widget">
48         <form>
49             <label for="developer">Developer: </label>
50             <input id="developer" />
51         </form>
52     </div>
53 </body>
54 </html>

20130316002

分类支持
本例是提供简单扩展AutoComplete 组件实现了一个自定义的custom.catcomplete UI组件以支持AutoComplete的分类支持。自定义组件有兴趣的可以参见jQuery 的Widget Factory。一般无需自定义UI组件,如果需要,可以在网站查找是否有人已经实现你需要的UI组件,实在不行才自定义UI组件,使用Widget Factory自定义组件的方法并不十分直观(这是因为JavaScript使用了面向“原型”的面向对象方法,而非通常的使用类的面向对象方法)。

1 <!doctype html>
2 <html lang="en">
3 <head>
4     <meta charset="utf-8" />
5     <title>jQuery UI Demos</title>
6     <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
7     <script src="scripts/jquery-1.9.1.js"></script>
8     <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
9  
10     <style>
11         .ui-autocomplete-category {
12             font-weight: bold;
13             padding: .2em .4em;
14             margin: .8em 0 .2em;
15             line-height: 1.5;
16         }
17     </style>
18     <script>
19         $.widget("custom.catcomplete", $.ui.autocomplete, {
20             _renderMenu: function (ul, items) {
21                 var that = this,
22                   currentCategory = "";
23                 $.each(items, function (index, item) {
24                     if (item.category != currentCategory) {
25                         ul.append("<li class='ui-autocomplete-category'>"
26                             + item.category + "</li>");
27                         currentCategory = item.category;
28                     }
29                     that._renderItemData(ul, item);
30                 });
31             }
32         });
33     </script>
34     <script>
35         $(function () {
36             var data = [
37               { label: "anders", category: "" },
38               { label: "andreas", category: "" },
39               { label: "antal", category: "" },
40               { label: "annhhx10", category: "Products" },
41               { label: "annk K12", category: "Products" },
42               { label: "annttop C13", category: "Products" },
43               { label: "anders andersson", category: "People" },
44               { label: "andreas andersson", category: "People" },
45               { label: "andreas johnson", category: "People" }
46             ];
47  
48             $("#search").catcomplete({
49                 delay: 0,
50                 source: data
51             });
52         });
53     </script>
54 </head>
55 <body>
56     <label for="search">Search: </label>
57     <input id="search" />
58 </body>
59 </html>

其中custom.catcomplete为自定义的UI组件,因此$( “#search” ).catcomplete 使用catcomplete ,而非autocomplete。
20130316003

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值