基于bootstrap插件實現(xiàn)autocomplete自動完成表單
基于bootstrap插件實現(xiàn)autocomplete自動完成表單,提供腳本代碼,用例,以及后臺服務(wù)端(php), 原文有些沒說清楚的地方,希望能幫助大家.
首先肯定還是加載bootstrap&jquery了,需要額外說明的是,后端返回的二維數(shù)組,和formatItem方法下面的調(diào)用保持一致即可;
另外,返回的數(shù)據(jù)要先parseJSON!切記。
相關(guān)參數(shù)說明:
source:function(query,process){}。query表示當前文本輸入框中的字符串,可在該方法中通過ajax向后臺請求數(shù)據(jù)(數(shù)組形式的json對象),然后將返回的對象作為process的參數(shù);
formatItem:function(item){}。對返回數(shù)據(jù)的具體某個json對象轉(zhuǎn)化為字符串格式,用以顯示在提示列表中,返回值:字符串;
setValue:function(item){}。選中提示列表某項時,設(shè)置文本輸入框中顯示的值以及實際需要獲取的值。返回值格式:{'data-value':item["輸入框顯示值的item屬性"],'real-value':item["實際需要獲取值的item屬性"]},后期可通過文本輸入框的real-value屬性獲取該值;
items:自動完成提示的最大結(jié)果集數(shù)量,默認:8;
minLength:當前文本輸入框中字符串達到該屬性值時才進行匹配處理,默認:1;
delay:指定延時毫秒數(shù)后,才正真向后臺請求數(shù)據(jù),以防止輸入過快導(dǎo)致頻繁向后臺請求,默認: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不支持復(fù)雜的對象。
//示例代碼如下: $('#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); });
如果大家還想深入學(xué)習(xí),可以點擊這里進行學(xué)習(xí),再為大家附3個精彩的專題:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。
- 基于Bootstrap+jQuery.validate實現(xiàn)Form表單驗證
- Bootstrap實現(xiàn)登錄校驗表單(帶驗證碼)
- JS組件Form表單驗證神器BootstrapValidator
- 全面解析Bootstrap表單使用方法(表單按鈕)
- 詳解Bootstrap創(chuàng)建表單的三種格式(一)
- 全面解析Bootstrap表單使用方法(表單樣式)
- 實用又漂亮的BootstrapValidator表單驗證插件
- 基于jQuery.validate及Bootstrap的tooltip開發(fā)氣泡樣式的表單校驗組件思路詳解
- Bootstrap每天必學(xué)之表單
- 整理關(guān)于Bootstrap表單的慕課筆記
相關(guān)文章
淺析JavaScript中break、continue和return的區(qū)別
這篇文章主要介紹了JavaScript中break、continue和return的區(qū)別,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-11-11網(wǎng)站被黑的假象--ARP欺騙之頁面中加入一段js
網(wǎng)站被黑的假象--ARP欺騙之頁面中加入一段js...2007-05-05javascript用正則表達式過濾空格的實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨avascript用正則表達式過濾空格的實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06JAVASCRIPT車架號識別/驗證函數(shù)代碼 汽車車架號驗證程序
偶然中在CSDN里找到C#版的驗證程序,因此改編了一版JS版本,相信會對大家有用2012-01-01