這篇文章主要介紹了基于bootstrap插件實(shí)現(xiàn)autocomplete自動(dòng)完成表單的相關(guān)資料，感興趣的朋友可以參考一下

基于bootstrap插件實(shí)現(xiàn)autocomplete自動(dòng)完成表單,提供腳本代碼,用例,以及后臺(tái)服務(wù)端(php)， 原文有些沒說清楚的地方，希望能幫助大家.

首先肯定還是加載bootstrap&jquery了，需要額外說明的是,后端返回的二維數(shù)組,和formatItem方法下面的調(diào)用保持一致即可;

另外,返回的數(shù)據(jù)要先parseJSON!切記。

相關(guān)參數(shù)說明：

source：function(query,process){}。query表示當(dāng)前文本輸入框中的字符串，可在該方法中通過ajax向后臺(tái)請(qǐng)求數(shù)據(jù)（數(shù)組形式的json對(duì)象），然后將返回的對(duì)象作為process的參數(shù)；

formatItem：function(item){}。對(duì)返回?cái)?shù)據(jù)的具體某個(gè)json對(duì)象轉(zhuǎn)化為字符串格式，用以顯示在提示列表中，返回值：字符串；

setValue：function(item){}。選中提示列表某項(xiàng)時(shí)，設(shè)置文本輸入框中顯示的值以及實(shí)際需要獲取的值。返回值格式：{'data-value':item["輸入框顯示值的item屬性"],'real-value':item["實(shí)際需要獲取值的item屬性"]}，后期可通過文本輸入框的real-value屬性獲取該值；

items：自動(dòng)完成提示的最大結(jié)果集數(shù)量，默認(rèn)：8；

minLength：當(dāng)前文本輸入框中字符串達(dá)到該屬性值時(shí)才進(jìn)行匹配處理，默認(rèn)：1；

delay：指定延時(shí)毫秒數(shù)后，才正真向后臺(tái)請(qǐng)求數(shù)據(jù)，以防止輸入過快導(dǎo)致頻繁向后臺(tái)請(qǐng)求，默認(rèn)：500

基于bootstrap插件實(shí)現(xiàn)autocomplete自動(dòng)完成表單，代碼如下

1.代碼

<script>

$('#sim_iccid').autocomplete({

 source:function(query,process){

  var matchCount = this.options.items;//允許返回結(jié)果集最大數(shù)量

  $.get("http://www.soyiyuan.com/update/",{"iccid":query,"matchCount":matchCount},function(respData){

   respData = $.parseJSON(respData);//解析返回的數(shù)據(jù)

   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為一個(gè)二維數(shù)組     

echo json_encode( $data )

3. 需要返回的標(biāo)準(zhǔn)json格式    

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

Bootstrap自動(dòng)完成控件Autocomplete是基于bootstrap自帶控件typeahead改造而來，因?yàn)?typeahead不支持復(fù)雜的對(duì)象。

//示例代碼如下：

$('#autocompleteInput').autocomplete({

  source:function(query,process){

   var matchCount = this.options.items;//返回結(jié)果集最大數(shù)量

   $.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(){ //獲取文本框的實(shí)際值

  var regionCode = $("#autocompleteInput").attr("real-value") || "";

  alert(regionCode);

 });

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。