jQuery UI Autocomplete示例（一）

時間 2019-11-24

原文原文鏈接

今天看到這麼個教程，分享給新手學習css

AutoComplete 在獲取焦點後，隨着用戶鍵入的內容，能夠在預訂的數據源中查找和已輸入的內容相匹配的內容列表供用戶選擇。
這能夠用做以前輸入過的內容也能夠用做自動填充相關內容，好比根據城市名，自動填充郵編等。
你能夠使用本地數據源或是遠程數據源，本地數據通常使用小數據集合，好比包含50條記錄的通信錄，遠程數據源通常爲保護大量記錄的數據庫。
基本用法
本例爲使用AutoComplete的基本用法，經過本地數據源（數組）定義一組語言列表，用戶輸入字母后，包含該字母的語言會做爲列表顯示出來：html

1 <!doctype html>jquery

2 <html lang="en">數據庫

3 <head>數組

4 <meta charset="utf-8" />app

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>ui

8 <script src="scripts/jquery-ui-1.10.1.custom.js"></script>this

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>

10 <script>

11 $(function () {

12 var names = ["Jörn Zaefferer",

13 "Scott González",

14 "John Resig"];

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 };

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>

10 <style>

11 .ui-autocomplete-category {

12 font-weight: bold;

13 padding: .2em .4em;