jQuery 入门教程(24): jQuery UI Autocomplete示例(二)分析

熊孩纸 阅读:282 2021-04-01 09:59:13 评论:0


如果一个输入框可以接受多个输入项,比如选择你喜欢的语言,以逗号隔开,这是也可以使用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             function split(val) {
37                 return val.split(/,\s*/);
38             }
39             function extractLast(term) {
40                 return split(term).pop();
41             }
42  
43             $("#tags")
44             // don't navigate away from the field on tab
45             //when selecting an item
46               .bind("keydown", function (event) {
47                   if (event.keyCode === $.ui.keyCode.TAB &&
48                       $(this).data("ui-autocomplete").menu.active) {
49                       event.preventDefault();
50                   }
51               })
52               .autocomplete({
53                   minLength: 0,
54                   source: function (request, response) {
55                       // delegate back to autocomplete,
56                       // but extract the last term
57                       response($.ui.autocomplete.filter(
58                         availableTags, extractLast(request.term)));
59                   },
60                   focus: function () {
61                       // prevent value inserted on focus
62                       return false;
63                   },
64                   select: function (event, ui) {
65                       var terms = split(this.value);
66                       // remove the current input
67                       terms.pop();
68                       // add the selected item
69                       terms.push(ui.item.value);
70                       // add placeholder to get the
71                       //comma-and-space at the end
72                       terms.push("");
73                       this.value = terms.join(", ");
74                       return false;
75                   }
76               });
77         });
78     </script>
79 </head>
80 <body>
81     <div class="ui-widget">
82         <label for="tags">Tag programming languages: </label>
83         <input id="tags" size="50" />
84     </div>
85 </body>
86 </html>

20130316004

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号