基于bootstrap插件實現(xiàn)autocomplete自動完成表單
基于bootstrap插件實現(xiàn)autocomplete自動完成表單,提供腳本代碼,用例,以及后臺服務端(php)， 原文有些沒說清楚的地方，希望能幫助大家.
首先肯定還是加載bootstrap&jquery了，需要額外說明的是,后端返回的二維數(shù)組,和formatItem方法下面的調(diào)用保持一致即可;
另外,返回的數(shù)據(jù)要先parseJSON!切記。
相關參數(shù)說明：
source：function(query,process){}。query表示當前文本輸入框中的字符串，可在該方法中通過ajax向后臺請求數(shù)據(jù)（數(shù)組形式的json對象），然后將返回的對象作為process的參數(shù)；
formatItem：function(item){}。對返回數(shù)據(jù)的具體某個json對象轉(zhuǎn)化為字符串格式，用以顯示在提示列表中，返回值：字符串；
setValue：function(item){}。選中提示列表某項時，設置文本輸入框中顯示的值以及實際需要獲取的值。返回值格式：{'data-value':item["輸入框顯示值的item屬性"],'real-value':item["實際需要獲取值的item屬性"]}，后期可通過文本輸入框的real-value屬性獲取該值；
items：自動完成提示的最大結(jié)果集數(shù)量，默認：8；
minLength：當前文本輸入框中字符串達到該屬性值時才進行匹配處理，默認：1；
delay：指定延時毫秒數(shù)后，才正真向后臺請求數(shù)據(jù)，以防止輸入過快導致頻繁向后臺請求，默認：500
基于bootstrap插件實現(xiàn)autocomplete自動完成表單，代碼如下
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為一個二維數(shù)組
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;//返回結(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(){ //獲取文本框的實際值
var regionCode = $("#autocompleteInput").attr("real-value") || "";
alert(regionCode);
});
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。
- 基于Bootstrap+jQuery.validate實現(xiàn)Form表單驗證
- Bootstrap實現(xiàn)登錄校驗表單(帶驗證碼)
- JS組件Form表單驗證神器BootstrapValidator
- 全面解析Bootstrap表單使用方法（表單按鈕）
- 詳解Bootstrap創(chuàng)建表單的三種格式（一）
- 全面解析Bootstrap表單使用方法（表單樣式）
- 實用又漂亮的BootstrapValidator表單驗證插件
- 基于jQuery.validate及Bootstrap的tooltip開發(fā)氣泡樣式的表單校驗組件思路詳解
- Bootstrap每天必學之表單
- 整理關于Bootstrap表單的慕課筆記
相關文章
javascript 精粹筆記，都是一些js下應用技巧之類，學習js的朋友可以簡單的參考瀏覽下。2010-05-05
這篇文章主要介紹了JavaScript面向?qū)ο缶?下部),需要的朋友可以參考下2017-09-09
bootstrap網(wǎng)格系統(tǒng)使用方法解析
這篇文章主要為大家詳細解析了bootstrap網(wǎng)絡系統(tǒng)使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
2019 年編寫現(xiàn)代 JavaScript 代碼的5個小技巧(小結(jié))
這篇文章主要介紹了2019 年編寫現(xiàn)代 JavaScript 代碼的5個小技巧，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
這篇文章主要為大家詳細介紹了js+css實現(xiàn)換膚效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JS+CSS3實現(xiàn)的簡易鐘表效果,涉及JavaScript結(jié)合定時器的頁面元素動態(tài)設置與數(shù)值計算相關操作技巧,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)下滑到底部自動翻頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
小程序scroll-view組件實現(xiàn)滾動的示例代碼
這篇文章主要介紹了小程序scroll-view組件實現(xiàn)滾動的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇解決bootstrap中下拉菜單點擊后不關閉的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
微信小程序onShareTimeline()實現(xiàn)分享朋友圈
這篇文章主要給大家介紹了關于微信小程序onShareTimeline()實現(xiàn)分享朋友圈的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01