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>
语调支持
某些语言支持语调字符,比如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  
补充:web前端 , JavaScript ,