基於bootstrap外掛實作autocomplete自動完成表單_javascript技巧

基於bootstrap外掛實現autocomplete自動完成表單,提供腳本程式碼,用例,以及後台服務端(php)， 原文有些沒說清楚的地方，希望能幫助大家.

首先肯定還是載入bootstrap&jquery了，需要額外說明的是,後端返回的二維數組,和formatItem方法下面的呼叫保持一致即可;
另外,回傳的資料要先parseJSON!切記。

相關參數說明：

source：function(query,process){}。 query表示目前文字輸入框中的字串，可在該方法中透過ajax向後台請求資料（數組形式的json物件），然後將傳回的物件作為process的參數；
formatItem：function(item){}。將回傳資料的具體某個json物件轉換為字串格式，用以顯示在提示清單中，傳回值：字串；
setValue：function(item){}。選取提示清單某項時，設定文字輸入方塊中顯示的值以及實際需要取得的值。傳回值格式：{'data-value':item["輸入框顯示值的item屬性"],'real-value':item["實際需要取得值的item屬性"]}，後期可透過文字輸入框的real-value屬性取得該值；
items：自動完成提示的最大結果集數量，預設：8；
minLength：當前文字輸入框中字串達到該屬性值時才進行比對處理，預設：1；
delay：指定延時毫秒數後，才正真向後台請求數據，以防止輸入過快導致頻繁向後台請求，預設：500

基於bootstrap外掛實現autocomplete自動完成表單，程式碼如下

1.代碼

<script>
$('#sim_iccid').autocomplete({
 source:function(query,process){
  var matchCount = this.options.items;//允许返回结果集最大数量
  $.get("http://www.soyiyuan.com/update/",{"iccid":query,"matchCount":matchCount},function(respData){
   respData = $.parseJSON(respData);//解析返回的数据
   return process(respData);
  });
 },
 formatItem:function(item){
  return item["iccid"]+"("+item["mobile"]+")";
 },
 setValue:function(item){
  return {'data-value':item["iccid"],'real-value':item["mobile"]};
 }
});
</script>

2. $data為一個二維陣列    
echo json_encode( $data )
3. 需要回傳的標準json格式    

[code][{"iccid":"12345678901234567890","mobile":"1850000"},{"iccid":"12345785","mobile":"1850001"1850001"

Bootstrap自動完成控制Autocomplete是基於bootstrap自帶控制typeahead改造而來，因為 typeahead不支援複雜的物件。

//示例代码如下：
 
$('#autocompleteInput').autocomplete({
  source:function(query,process){
   var matchCount = this.options.items;//返回结果集最大数量
   $.post("/bootstrap/region",{"matchInfo":query,"matchCount":matchCount},function(respData){
    return process(respData);
   });
  },
  formatItem:function(item){
   return item["regionName"]+"("+item["regionNameEn"]+"，"+item["regionShortnameEn"]+") - "+item["regionCode"];
  },
  setValue:function(item){
   return {'data-value':item["regionName"],'real-value':item["regionCode"]};
  }
 });
 
$("#goBtn").click(function(){ //获取文本框的实际值
  var regionCode = $("#autocompleteInput").attr("real-value") || "";
  alert(regionCode);
 });

以上就是本文的全部內容，希望對大家的學習有所幫助。