首頁 >web前端 >js教程 >基於bootstrap外掛實作autocomplete自動完成表單_javascript技巧

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

WBOY
WBOY原創
2016-05-16 15:01:462246瀏覽

基於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);
 });
以上就是本文的全部內容,希望對大家的學習有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn