基於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"}][code]
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);
});
如果大家還想深入學習，可以點擊這裡進行學習，再為大家附3個精彩的專題：
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap插件使用教程
以上就是本文的全部內容，希望對大家的學習有所幫助。