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)文章
JavaScript實(shí)現(xiàn)緩動(dòng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)緩動(dòng)動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11基于javascript實(shí)現(xiàn)全國(guó)省市二級(jí)聯(lián)動(dòng)下拉選擇菜單
這篇文章主要介紹了基于javascript實(shí)現(xiàn)全國(guó)省市二級(jí)聯(lián)動(dòng)下拉選擇菜單,以一個(gè)完整實(shí)例形式較為詳細(xì)的分析了js實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)下拉菜單的實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-01-01小程序開(kāi)發(fā)中如何使用async-await并封裝公共異步請(qǐng)求的方法
在平常的項(xiàng)目開(kāi)發(fā)中肯定會(huì)遇到同步異步執(zhí)行的問(wèn)題,這篇文章主要介紹了小程序開(kāi)發(fā)中如何使用async-await并封裝公共異步請(qǐng)求的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01js實(shí)現(xiàn)移動(dòng)端編輯添加地址【模仿京東】
本篇文章主要介紹了js實(shí)現(xiàn)移動(dòng)端編輯添加地址[模仿京東]的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04原生JavaScript實(shí)現(xiàn)AJAX、JSONP
本篇文章將會(huì)講解原生JavaScript如何實(shí)現(xiàn)簡(jiǎn)單的AJAX,還有跨域請(qǐng)求JSONP。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-02-02詳解js正則表達(dá)式驗(yàn)證時(shí)間格式xxxx-xx-xx形式
本篇文章主要介紹了詳解js正則表達(dá)式驗(yàn)證時(shí)間格式xxxx-xx-xx形式,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02