bootstrap suggest下拉框使用详解

bootStrap suggest js下拉框的使用,供大家参考,具体内容如下

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() {

/**

* 请求json格式的数据 {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 的第几个数据,作为input输入框的显示的内容

// indexKey: 2, //data.value 的第几个数据,作为input输入框的内容

data : dataList

}).on('onDataRequestSuccess', function(e, result) {

console.log('从 json参数中获取,不会触发 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>(即上方js代码)

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>

以上是 bootstrap suggest下拉框使用详解 的全部内容, 来源链接: utcz.com/z/329559.html

回到顶部