使用bootstrap實(shí)現(xiàn)下拉框搜索功能的實(shí)例講解
更新時(shí)間：2018年08月10日 09:11:12 作者：回歸心靈
今天小編就為大家分享一篇使用bootstrap實(shí)現(xiàn)下拉框搜索功能的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
背景
公司的小二后臺(tái)有一個(gè)下拉框選擇經(jīng)銷商的功能，由于選擇的經(jīng)銷商過(guò)多，因此添加搜索功能。
前提
配置好Bootstrap相關(guān)的開發(fā)環(huán)境
主要內(nèi)容
<div class="form-group">
<label class="col-sm-3 control-label" for="state">經(jīng)銷商信息</label>
<div class="col-sm-3">
<select name="dealer_id" id="dealer_id" class="selectpicker show-tick form-control" data-width="98%" data-first-option="false" title='請(qǐng)選擇經(jīng)銷商(必選)' required data-live-search="true">
<#foreach dealer in dealerList>
<option value="${dealer.id?c}">${dealer.name!}</option>
</#foreach>
</select>
</div>
</div>
其中最主要的是select標(biāo)簽中的兩個(gè)屬性： class=”selectpicker show-tick form-control” 和 required data-live-search=”true” 。數(shù)據(jù)展示中foreach是模版引擎freemarker的循環(huán)遍歷列表語(yǔ)句，當(dāng)然測(cè)試時(shí)，您可以列幾個(gè)option標(biāo)簽數(shù)據(jù)。
效果圖：
以上這篇使用bootstrap實(shí)現(xiàn)下拉框搜索功能的實(shí)例講解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了微信小程序checkbox組件的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要為大家分享了純javascript響應(yīng)式樹形菜單效果的簡(jiǎn)單教程，對(duì)多級(jí)目錄樹形菜單感興趣的小伙伴們可以參考一下2015-11-11
Bootstrap treeview實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù)并添加快捷搜索功能
本文實(shí)現(xiàn)了運(yùn)用bootstrap treeview實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù)，并且添加快捷搜索功能，需要的朋友參考下2018-01-01
這篇文章主要介紹了12種JavaScript常用的MVC框架比較分析,以獨(dú)特的視角分析了12中常見的JavaScript MVC框架各種優(yōu)缺點(diǎn),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
JavaScript設(shè)計(jì)模式中的橋接和中介者模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式中的橋接和中介者模式，橋接設(shè)計(jì)模式是一種偏向于組合的設(shè)計(jì)模式，而非繼承的設(shè)計(jì)模式，實(shí)現(xiàn)的細(xì)節(jié)從一個(gè)模塊推送給另一個(gè)具有單獨(dú)模塊的對(duì)象，而中介者設(shè)計(jì)模式是指通過(guò)一個(gè)中介者對(duì)象封裝一系列的對(duì)象交互2022-06-06
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)公告上線滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要介紹了javascript框架設(shè)計(jì)之類工廠的相關(guān)資料,非常淺顯易懂，有需要的小伙伴可以查看下。2015-06-06
js編寫trim()函數(shù)及正則表達(dá)式的運(yùn)用
js中本身是沒有trim函數(shù)的，不過(guò)你可以自己寫一個(gè)，下面的實(shí)現(xiàn)方法是用到了正則表達(dá)式，效率不錯(cuò)，并把這三個(gè)方法加入String對(duì)象的內(nèi)置方法中去2013-10-10
用 js操作html標(biāo)簽的一些代碼，大家可以運(yùn)行后查看效果2008-11-11
JS彈出對(duì)話框?qū)崿F(xiàn)方法(三種方式)
這篇文章主要介紹了JS彈出對(duì)話框?qū)崿F(xiàn)方法,結(jié)合實(shí)例形式分析了三種方式,包括alert、confirm及prompt,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-12-12