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???????????????????????? || 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>
?
分類支持
本例是提供簡單擴展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。
?
?
轉載于:https://www.cnblogs.com/wan-wan/p/3770441.html
總結
以上是生活随笔為你收集整理的jQuery UI Autocomplete示例（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网络流24题
- 下一篇： 算法学习：最小圆覆盖