天天看點
傳回

jQuery.Autocomplete插件的使用一 資料源的指定二 功能支援：三 主要的事件四 多個值的Autocomplete

jQuery.Autocomplete 是jquery的流行插件，能夠很好的實作輸入框的自動完成(autocomplete)、建議提示(input suggest)功能，支援ajax資料加載。

官方網站： http://jqueryui.com/autocomplete/

官網上的一個完整的簡單例子：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI Autocomplete - Default functionality</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  8.   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="/resources/demos/style.css">
  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>

一 資料源的指定

此功能最主要的參數是source，設定比對菜單中的資料項，設定方式：

1、string數組參數，格式：[ "Choice1", "Choice2" ]

  1. 初始化時：
  2. $( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });
  3. 初始化後
  4. // getter
  5. var source = $( ".selector" ).autocomplete( "option", "source" );
  6. // setter
  7. $( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] );

2、object數組參數，格式[ { label: "Choice1", value: "value1" }, ... ]

其中label是在比對菜單中顯示項的值，而value，是選中此比對項後，append到<input>中的真實值

3、string參數

如果是string參數，則是指定一個遠端的資料源，然後當<input>中有輸入變化，即change事件後，會自動将輸入的内容，以GET方式發送到遠端資料源，其中輸入内容以term參數儲存；

例如，參數為http://remoteSource，那麼在使用者輸入abc後，将會發送一個GET請求如http://remoteSource?term=abc

傳回的結果必須以json格式，資料格式如上面1、2描述

然後在伺服器端接收，并輸出相應結果，注意預設傳遞的參數名稱為term：

  1. public void ProcessRequest(HttpContext context)
  2. {
  3.     // 查詢的參數名稱預設為term
  4.     string query = context.Request.QueryString["term"];
  5.     context.Response.ContentType = "text/javascript";
  6.     //輸出字元串數組 或者 JSON 數組
  7.     context.Response.Write("[{\"label\":\"部落格園\",\"value\":\"cnblogs\"},{\"label\":\"囧月\",\"value\":\"囧月\"}]");
  8. }

4、function參數，格式 Function( Object request, Function response( Object data ) )

這種參數最靈活，可以讓你以自己的方式向伺服器發出查詢，并自己解析資料，最後将資料回寫到response即可

  1. $ ( ".selector" ). autocomplete ({
  2.   source: function(request,response){
  3.     //擷取使用者輸入
  4.     var term = request.term;
  5.     //根據自定義方式從伺服器擷取資料
  6.     ...
  7.     //還可以自己解析資料
  8.     ..
  9.     //最後把資料按照前面1、2描述的格式，放到response中
  10.     response(data);
  11.   }
  12. });

一個例子：

  1. var hosts = ["gmail.com", "live.com", "hotmail.com", "yahoo.com", "cnblogs.com", "火星.com", "囧月.com"];
  2. $("#email1").autocomplete({
  3.     autoFocus: true,
  4.     source: function(request, response) {
  5.         var term = request.term, //request.term為輸入的字元串
  6.             ix = term.indexOf("@"),
  7.             name = term, // 使用者名
  8.             host = "", // 域名
  9.             result = []; // 結果
  10.         result.push(term);
  11.         // result.push({ label: term, value: term }); // json格式
  12.         if (ix > -1) {
  13.             name = term.slice(0, ix);
  14.             host = term.slice(ix + 1);
  15.         }
  16.         if (name) {
  17.             var findedHosts = (host ? $.grep(hosts, function(value) {
  18.                 return value.indexOf(host) > -1;
  19.             }) : hosts),
  20.             findedResults = $.map(findedHosts, function(value) {
  21.                 return name + "@" + value; //傳回字元串格式
  22.                 // return { label: name + " @ " + value, value: name + "@" + value }; // json格式
  23.             });
  24.             result = result.concat($.makeArray(findedResults));
  25.         }
  26.         response(result);//呈現結果
  27.     }
  28. });

二 功能支援：

此自動補全功能，支援<input><textarea>或者有contenteditable 屬性的标簽

鍵盤操作：

1、上下鍵 可以選擇比對項

2、esc建 可以關閉比對菜單

3、enter建 可以選擇目前選中的比對項

4、pageup pagedown 可以操作比對菜單中的滾動條

CSS：

1、ui-autocomplete：比對菜單中比對項的css屬性

2、ui-autocomplete-input：輸入框的屬性

依賴：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" target="_blank" rel="external nofollow" />  

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>  

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  

三 主要的事件

有一些事件，可用于在一些階段進行額外的控制：

create(event, ui)：Autocomplete建立時，可以在此事件中，對外觀進行一些控制

search(event, ui)： 在開始請求之前，可以在此事件中傳回false來取消請求

open(event, ui)：Autocomplete的結果清單彈出時

focus(event, ui)：Autocomplete的結果清單任意一項獲得焦點時，ui.item為獲得焦點的項

select(event, ui)：Autocomplete的結果清單任意一項選中時，ui.item為選中的項

close(event, ui)：Autocomplete的結果清單關閉時

change(event, ui)：當值改變時，ui.item為選中的項

這些事件的ui參數的item屬性（如果有的話）預設有label和value屬性，不管在source中設定的資料是Array還是JSON數組， 家裝網如下3種：

["cnblogs","部落格園","囧月"]

[{label: "部落格園", value: "cnblogs"}, {label: "囧月", value: "囧月"}]

[{label: "部落格園", value: "cnblogs", id: "1"}, {label: "囧月", value: "囧月", id: "2"}]

假如是第三種的話，還可以得到ui.item.id的值。

這些事件可以通過2種方式來綁定，如下：

  1. // 在參數中
  2. $("#autocomp").autocomplete({
  3.     source: availableTags
  4.     , select: function(e, ui) {
  5.       alert(ui.item.value)
  6.     }
  7. });
  8. // 通過bind來綁定
  9. $("#autocomp").bind("autocompleteselect", function(e, ui) {
  10.     alert(ui.item.value);
  11. });

通過bind來綁定的方式使用的事件名稱為"autocomplete"+事件名稱，如"select"就是"autocompleteselect"。

四 多個值的Autocomplete

一般情況下，輸入框的autocomplete僅需要一個值就可以(如：javascript)；假如需要多個值(如：javascript,c#,asp.net)，則需要綁定一些事件來進行額外處理，具體可以參考 http://www.cnblogs.com/lwme/archive/2012/02/12/jquery-ui-autocomplete.html

網站建設 jQuery.autocomplete jquery
上一篇: js 正則找出最長連續子串長度
下一篇: 2016弱校聯盟十一專場10.3 We don't wanna work!

繼續閱讀