基於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); });