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     <p class="ui-widget">

44         <label for="tags">Tags: </label>

45         <input id="tags" />

46     </p>

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     <p class="ui-widget">

48         <form>

49             <label for="developer">Developer: </label>

50             <input id="developer" />

51         </form>

52     </p>

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

 

發佈留言