首頁 > 開發者 > JavaScript
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。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
