使用bootstrap實現(xiàn)下拉框搜索功能的實例講解
更新時間：2018年08月10日 09:11:12 作者：回歸心靈
今天小編就為大家分享一篇使用bootstrap實現(xiàn)下拉框搜索功能的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
背景
公司的小二后臺有一個下拉框選擇經(jīng)銷商的功能，由于選擇的經(jīng)銷商過多，因此添加搜索功能。
前提
配置好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='請選擇經(jīng)銷商(必選)' required data-live-search="true">
<#foreach dealer in dealerList>
<option value="${dealer.id?c}">${dealer.name!}</option>
</#foreach>
</select>
</div>
</div>
其中最主要的是select標簽中的兩個屬性： class=”selectpicker show-tick form-control” 和 required data-live-search=”true” 。數(shù)據(jù)展示中foreach是模版引擎freemarker的循環(huán)遍歷列表語句，當然測試時，您可以列幾個option標簽數(shù)據(jù)。
效果圖：
以上這篇使用bootstrap實現(xiàn)下拉框搜索功能的實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Google 爬蟲如何抓取 JavaScript 的內(nèi)容
我們測試了谷歌爬蟲是如何抓取 JavaScript，下面就是我們從中學習到的知識,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細介紹了微信小程序WebSocket實現(xiàn)聊天對話功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了7款基于桌面和WEB的JavaScript調(diào)試工具，更有效地處理動態(tài)類型使應用程序更符合編碼標準，不管你是新學習javascript的菜鳥還是業(yè)界大神，都非常的有用。2014-12-12
這篇文章主要介紹了JS封裝的選項卡TAB切換效果,結(jié)合實例形式分析了javascript響應鼠標事件動態(tài)操作頁面元素屬性實現(xiàn)tab切換的相關(guān)技巧,需要的朋友可以參考下2016-09-09
訪問修改DOM元素都會導致瀏覽器重新計算頁面的幾何變化，下面為大家介紹下javascript性能提升方法,需要的朋友可以參考下2014-02-02
主要是測試了數(shù)組 push()方法與直接相加這兩種在JS引擎上性能的實際處理情況。程序代碼簡單明了，沒什么好解釋的。2009-12-12
詳解webpack中的hash、chunkhash、contenthash區(qū)別
這篇文章主要介紹了詳解webpack中的hash、chunkhash、contenthash區(qū)別，詳細的介紹了hash、chunkhash、contenthash的用法和區(qū)別，有興趣的可以了解一下2018-01-01
今天看書，作者討論到能否采用動態(tài)原型方法展示繼承機制，給出的答案是：不能。原因是prototype對象的唯一性。看下面代碼（這段代碼不正確，卻值得研究）2009-12-12
這篇文章主要為大家詳細介紹了js插件實現(xiàn)圖片滑動驗證碼，滑動模塊，實現(xiàn)驗證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了JS獲取網(wǎng)頁圖片name屬性的方法,涉及javascript操作圖片屬性的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04