bootstrap suggest下拉框使用詳解
bootStrap suggest js下拉框的使用,供大家參考,具體內(nèi)容如下
HTML
<div class="modalTop" id="suit_name_div"> <p>選擇商品:</p> <%@ include file="dataJs/item/itemSuggest.jsp" %> </div>
itemSuggest.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<link id="bscss" href="plugins/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<div class="container"
style="width: 40%; margin: 0; padding: 0; margin-left: 16px; float: left;">
<div class="input-group" style="width: 100%">
<i class="clearable fa fa-remove"
style="line-hight: 30px; font-size: 14px"></i>
<input id="suitName"
type="text" style="width: 300px; height: 30px; padding: 0 4px;">
<div class="input-group-btn" style="width: 0%">
<ul class="dropdown-menu dropdown-menu-right" role="menu">
</ul>
</div>
<!-- /btn-group -->
</div>
</div>
<div class="clearfix"></div>
js
(function() {
/**
* 請(qǐng)求json格式的數(shù)據(jù) {value: [key:value,key2:value2]};
*/
function init(url, dataList) {
$.ajax({
type : 'post',
async : false,
url : url,
success : function(data) {
for (var i = 0; i < data.length; i++) {
var obj = {};
obj.name = data[i].itemName;
dataList.value.push(obj);
}
}
})
return dataList;
}
/**
* 插件綁定事件
*/
function suggest(domID, dataList) {
$("#" + domID).bsSuggest({
indexId : 1, // data.value 的第幾個(gè)數(shù)據(jù),作為input輸入框的顯示的內(nèi)容
// indexKey: 2, //data.value 的第幾個(gè)數(shù)據(jù),作為input輸入框的內(nèi)容
data : dataList
}).on('onDataRequestSuccess', function(e, result) {
console.log('從 json參數(shù)中獲取,不會(huì)觸發(fā) onDataRequestSuccess 事件', result);
}).on('onSetSelectValue', function(e, keyword, data) {
console.log('onSetSelectValue: ', keyword, data);
}).on('onUnsetSelectValue', function() {
console.log("onUnsetSelectValue");
});
}
var dataList = {
value : []
};
var url = hostUrl + "item/selectItemList.do";
init(url, dataList);
console.info(dataList);
suggest("suitName", dataList);
}());
要引入的js
<script src="suggest/src/bootstrap-suggest.js"></script> <script src="dataJs/item/itemSuggest.js"></script>(即上方j(luò)s代碼) <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴(kuò)展
- Bootstrap select多選下拉框?qū)崿F(xiàn)代碼
- Bootstrap模塊dropdown實(shí)現(xiàn)下拉框響應(yīng)
- Bootstrap框架下下拉框select搜索功能
- bootstrap datetimepicker實(shí)現(xiàn)秒鐘選擇下拉框
- Bootstrap select實(shí)現(xiàn)下拉框多選效果
- 基于BootStrap multiselect.js實(shí)現(xiàn)的下拉框聯(lián)動(dòng)效果
- 基于bootstrap實(shí)現(xiàn)多個(gè)下拉框同時(shí)搜索功能
- Bootstrap組合上、下拉框簡(jiǎn)單實(shí)現(xiàn)代碼
- 基于Bootstrap下拉框插件bootstrap-select使用方法詳解
相關(guān)文章
jsp js鼠標(biāo)移動(dòng)到指定區(qū)域顯示選項(xiàng)卡離開(kāi)時(shí)隱藏示例
jsp js 鼠標(biāo)移動(dòng)到指定區(qū)域顯示選項(xiàng)卡示例,離開(kāi)時(shí)隱藏,具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以了解下哈,希望對(duì)你有所幫助2013-06-06
JavaScript必知必會(huì)(九)function 說(shuō)起 閉包問(wèn)題
這篇文章主要介紹了JavaScript必知必會(huì)(九)function 說(shuō)起 閉包問(wèn)題的相關(guān)資料,需要的朋友可以參考下2016-06-06
JavaScript實(shí)現(xiàn)body內(nèi)任意節(jié)點(diǎn)的自定義屬性功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)body內(nèi)任意節(jié)點(diǎn)的自定義屬性功能,涉及javascript針對(duì)DOM節(jié)點(diǎn)的獲取及屬性設(shè)置相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
javascript中動(dòng)態(tài)函數(shù)用法實(shí)例分析
這篇文章主要介紹了javascript中動(dòng)態(tài)函數(shù)用法,實(shí)例分析了動(dòng)態(tài)函數(shù)的定義方法與使用技巧,需要的朋友可以參考下2015-05-05
JavaScript可否多線程? 深入理解JavaScript定時(shí)機(jī)制
JavaScript的setTimeout與setInterval是兩個(gè)很容易欺騙別人感情的方法,因?yàn)槲覀冮_(kāi)始常常以為調(diào)用了就會(huì)按既定的方式執(zhí)行, 我想不少人都深有同感2012-05-05

