jQuery UI Autocomplete 體驗

Query UI Autocomplete是jQuery UI的自動完成組件，是我用過的最強大、最靈活的Autocomplete，它支持本地的Array/JSON數組、經過ajax請求的Array/JSON數組、JSONP、以及Function(最靈活)等方式來獲取數據。

支持的數據源

jQuery UI Autocomplete主要支持字符串Array、JSON兩種數據格式。

普通的Array格式沒有什麼特殊的，以下：

1	[ "cnblogs" , "博客園" , "囧月" ]

對於JSON格式的Array，則要求有：label、value屬性，以下：

1	[{label: "博客園" , value: "cnblogs" }, {label: "囧月" , value: "囧月" }]

其中label屬性用於顯示在autocomplete彈出菜單，而value屬性則是選中後給文本框賦的值。

若是沒有指定其中一個屬性則用另外一個屬性替代(即value和label值同樣)，以下：

1 2	[{label: "cnblogs" }, {label: "囧月" }] [{value: "cnblogs" }, {value: "囧月" }]

若是label和value都沒有指定，則沒法用於autocomplete的提示。

另外須要注意，對於從服務器端輸出的JSON的key必須用雙引號，以下：

1	[{ "label" : "博客園" , "value" : "cnblogs" }, { "label" : "囧月" , "value" : "囧月" }]

不然可能會出現 parsererror錯誤。

主要的參數

jQuery UI Autocomplete經常使用的參數有：

1. Source：用於指定數據來源，類型爲String、Array、Function
   1. String：用於ajax請求的服務器端地址，返回Array/JSON格式
   2. Array：即字符串數組 或 JSON數組
   3. Function(request, response)：經過request.term得到輸入的值，response([Array])來呈現數據；(JSONP是這種方式)
2. minLength：當輸入框內字符串長度達到minLength時，激活Autocomplete
3. autoFocus：當Autocomplete選擇菜單彈出時，自動選中第一個
4. delay：即延遲多少毫秒激活Autocomplete

其餘不經常使用的就不羅列了。

使用方法

假如頁面上有如下輸入框：

<input type="text" id="autocomp" />

AJAX請求

經過指定source爲服務器端的地址來實現，以下：

1 2 3 4

$( "#autocomp" ).autocomplete({      source: "remote.ashx" ,      minLength: 2 });

而後在服務器端接收，並輸出相應結果，注意默認傳遞的參數名稱爲term：

public void ProcessRequest(HttpContext context)
{
    // 查詢的參數名稱默認爲term
    string query = context.Request.QueryString["term"];
    context.Response.ContentType = "text/javascript";
    //輸出字符串數組 或者 JSON 數組
    context.Response.Write("[{\"label\":\"博客園\",\"value\":\"cnblogs\"},{\"label\":\"囧月\",\"value\":\"囧月\"}]");
}

本地Array/JSON數組

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

// 本地字符串數組 var  availableTags = [      "C#" ,      "C++" ,      "Java" ,      "JavaScript" ,      "ASP" ,      "ASP.NET" ,      "JSP" ,      "PHP" ,      "Python" ,      "Ruby" ]; $( "#local1" ).autocomplete({      source: availableTags }); // 本地json數組 var  availableTagsJSON = [      { label: "C# Language" , value: "C#"  },      { label: "C++ Language" , value: "C++"  },      { label: "Java Language" , value: "Java"  },      { label: "JavaScript Language" , value: "JavaScript"  },      { label: "ASP.NET" , value: "ASP.NET"  },      { label: "JSP" , value: "JSP"  },      { label: "PHP" , value: "PHP"  },      { label: "Python" , value: "Python"  },      { label: "Ruby" , value: "Ruby"  } ]; $( "#local2" ).autocomplete({      source: availableTagsJSON });

Callback Function方式

經過指定source爲自定義函數來實現自定義數據的獲取，函數主要有2個參數(request,response)，分別用於獲取輸入的值、呈現結果

本地Array方式獲取數據（模仿新浪微博的登陸）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

var  hosts = [ "gmail.com" , "live.com" , "hotmail.com" , "yahoo.com" , "cnblogs.com" , "火星.com" , "囧月.com" ]; $( "#email1" ).autocomplete({      autoFocus: true ,      source: function (request, response) {          var  term = request.term, //request.term爲輸入的字符串              ix = term.indexOf( "@" ),              name = term, // 用戶名              host = "" , // 域名              result = []; // 結果            result.push(term);          // result.push({ label: term, value: term }); // json格式          if  (ix > -1) {              name = term.slice(0, ix);              host = term.slice(ix + 1);          }          if  (name) {              var  findedHosts = (host ? $.grep(hosts, function (value) {                  return  value.indexOf(host) > -1;              }) : hosts),              findedResults = $.map(findedHosts, function (value) {                  return  name + "@"  + value; //返回字符串格式                  // return { label: name + " @ " + value, value: name + "@" + value }; // json格式              });              result = result.concat($.makeArray(findedResults));          }          response(result); //呈現結果      } });

JSONP方式獲取數據

直接從官方DEMO拿來的，經過發送ajax請求到遠程服務器，而後對返回結果進行處理，最後經過response來呈現：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

$( "#jsonp" ).autocomplete({      source: function (request, response) {          $.ajax({              url: "http://ws.geonames.org/searchJSON" ,              dataType: "jsonp" ,              data: {                  featureClass: "P" ,                  style: "full" ,                  maxRows: 12,                  name_startsWith: request.term              },              success: function (data) {                  response($.map(data.geonames, function (item) {                      return  {                          label: item.name + (item.adminName1 ? ", "  + item.adminName1 : "" ) + ", "  + item.countryName,                          value: item.name                      }                  }));              }          });      },      minLength: 2 });

主要的事件

jQuery UI Autocomplete有一些事件，可用於在一些階段進行額外的控制：

1. create(event, ui)：Autocomplete建立時，能夠在此事件中，對外觀進行一些控制
2. search(event, ui)： 在開始請求以前，能夠在此事件中返回false來取消請求
3. open(event, ui)：Autocomplete的結果列表彈出時
4. focus(event, ui)：Autocomplete的結果列表任意一項得到焦點時，ui.item爲得到焦點的項
5. select(event, ui)：Autocomplete的結果列表任意一項選中時，ui.item爲選中的項
6. close(event, ui)：Autocomplete的結果列表關閉時
7. change(event, ui)：當值改變時，ui.item爲選中的項

這些事件的ui參數的item屬性（若是有的話）默認有label和value屬性，無論在source中設置的數據是Array仍是JSON數組，以下3種：

1 2 3

[ "cnblogs" , "博客園" , "囧月" ] [{label: "博客園" , value: "cnblogs" }, {label: "囧月" , value: "囧月" }] [{label: "博客園" , value: "cnblogs" , id: "1" }, {label: "囧月" , value: "囧月" , id: "2" }]

假如是第三種的話，還能夠獲得ui.item.id的值。

這些事件能夠經過2種方式來綁定，以下：

1 2 3 4 5 6 7 8 9 10 11 12

// 在參數中 $( "#autocomp" ).autocomplete({      source: availableTags      , select: function (e, ui) {        alert(ui.item.value)      } });   // 經過bind來綁定 $( "#autocomp" ).bind( "autocompleteselect" , function (e, ui) {      alert(ui.item.value); });

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

多個值的Autocomplete

通常狀況下，輸入框的autocomplete僅須要一個值就能夠(如：javascript)；假如須要多個值(如：javascript,c#,asp.net)，則須要綁定一些事件來進行額外處理：

1. 在focus事件中返回false，避免輸入框的值被autocomplete的單個值取代
2. 在select事件中組合多個值
3. 在元素的keydown事件作一些處理，理由同1
4. 使用callback function方式的source，來獲取最後輸入的值，並呈現結果

仍是直接拿官方DEMO的代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

// 按逗號分隔多個值 function  split(val) {      return  val.split(/,\s*/); } // 提取輸入的最後一個值 function  extractLast(term) {      return  split(term).pop(); } // 按Tab鍵時，取消爲輸入框設置value function  keyDown(event) {      if  (event.keyCode === $.ui.keyCode.TAB &&              $( this ).data( "autocomplete" ).menu.active) {          event.preventDefault();      } } var  options = {      // 得到焦點      focus: function () {          // prevent value inserted on focus          return  false ;      },      // 從autocomplete彈出菜單選擇一個值時，加到輸入框最後，並以逗號分隔      select: function (event, ui) {          var  terms = split( this .value);          // remove the current input          terms.pop();          // add the selected item          terms.push(ui.item.value);          // add placeholder to get the comma-and-space at the end          terms.push( "" );          this .value = terms.join( ", " );          return  false ;      } }; // 多個值，本地數組 $( "#local3" ).bind( "keydown" , keyDown)      .autocomplete($.extend(options, {          minLength: 2,          source: function (request, response) {              // delegate back to autocomplete, but extract the last term              response($.ui.autocomplete.filter(                  availableTags, extractLast(request.term)));          }      })); // 多個值，ajax返回json $( "#ajax3" ).bind( "keydown" , keyDown)      .autocomplete($.extend(options, {          minLength: 2,          source: function (request, response) {              $.getJSON( "remoteJSON.ashx" , {                  term: extractLast(request.term)              }, response);          }      }));

結尾

最後，放上代碼：點擊下載。

更多的資料請看jQuery UI Autocomplete官方演示：http://jqueryui.com/demos/autocomplete

做者：囧月
出處：http://lwme.cnblogs.com/ 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。