Bootstrap框架下下拉框select搜索功能

更新時間：2020年03月26日 16:44:12 作者：花落莫相離

這篇文章主要為大家詳細(xì)介紹了Bootstrap框架下下拉框select搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

之前用Easyui框架下做的下拉框選擇，雖然可以搜索，但是有諸多的不便：比如，不能模糊匹配，必須按照第一個字母來搜索

心血來潮，想換個框架寫后臺，然后用Bootstrap搭了個架子，然后兩種樣式?jīng)_突，百度了一把，找到了另一個牛逼的基于Bootstrap下拉框搜索功能的js

不區(qū)分大小寫，模糊匹配，哈哈，太棒了~~

具體用法：

<script type="text/javascript" src="<%=basePath%>/js/commons/jquery.min.js"></script>
<script type="text/javascript" src="${basePath}/js/silviomoreto-bootstrap/bootstrap-select.js"></script>
<link rel="stylesheet" type="text/css" href="${basePath}/js/silviomoreto-bootstrap/bootstrap-select.css">

<!-- 3.0 -->
<link href="${basePath}/js/silviomoreto-bootstrap/bootstrap.min.css" rel="stylesheet">
<script src="${basePath}/js/silviomoreto-bootstrap/bootstrap.min.js"></script>初始化一下：
 
$(window).on('load', function () {

 $('.selectpicker').selectpicker({
 'selectedText': 'cat'
 });

 // $('.selectpicker').selectpicker('hide');
});

關(guān)鍵代碼是class和后面是否支持搜索

 <select id="bs3Select" class="selectpicker show-tick form-control" multiple data-live-search="true">
 <option>cow</option>
 <option>bull</option>
 <option class="get-class" disabled>ox</option>
 
 </select>

如果大家還想深入學(xué)習(xí)，可以點擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程

更多搜索功能實現(xiàn)的精彩文章，請點擊專題：javascript搜索功能匯總進(jìn)行學(xué)習(xí)

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript腳本調(diào)試方法小結(jié)
相信大家試過編寫javascript腳本時發(fā)生這樣或那樣的錯誤，但是js并沒有很好的調(diào)試方法，在這里介紹兩個方法。
2008-11-11
性能優(yōu)化篇之Webpack構(gòu)建速度優(yōu)化的建議
這篇文章主要介紹了性能優(yōu)化篇之Webpack構(gòu)建速度優(yōu)化的建議，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
動態(tài)的改變IFrame的高度實現(xiàn)IFrame自動伸展適應(yīng)高度
動態(tài)的改變IFrame的高度，實現(xiàn)IFrame自動伸展，父頁面也自動神縮原理：在IFrame子頁面一加載的時候，調(diào)用父IFrame對象，改變其高度
2012-12-12
js點亮星星評分并獲取參數(shù)的js代碼
點亮星星評分后，點擊按鈕，立即獲得分?jǐn)?shù)參數(shù)值，方便不想使用ajax傳參的朋友
2014-07-07
淺談js多維數(shù)組和hash數(shù)組定義和使用
下面小編就為大家?guī)硪黄獪\談js多維數(shù)組和hash數(shù)組定義和使用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
layui?框架的upload上傳文件的data參數(shù)傳到后端的方法
這篇文章主要介紹了layui框架的upload上傳文件的data參數(shù)傳到后端的方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-11-11
Chart.js與ECharts.js圖表使用過程組件對比
chartjs只能基于canvas,雖然只有英文文檔,但定制化程度更高,社區(qū)成熟,功能就更加穩(wěn)定,ECharts.js可以基于svg或者canvas去渲染,有融合主流前端框架的社區(qū)庫,另外ECharts.js還支持3d效果的圖表,相當(dāng)炫酷,國內(nèi)開發(fā)者大多數(shù)使用這個,有中文文檔
2023-10-10
如何設(shè)置iframe高度自適應(yīng)在跨域情況下的可用方法
iframe的高度需要根據(jù)子頁面的實際高度來進(jìn)行調(diào)整，但是如果子頁面不在同一域中怎么辦？這時候腳本沒有辦法獲取到子頁面的高度，存在JavaScript跨域的問題
2013-09-09
JavaScript框架(iframe)操作總結(jié)
這篇文章主要介紹了JavaScript框架(iframe)操作,介紹了種情況下的操作方法,需要的朋友可以參考下
2014-04-04
JavaScript實現(xiàn)手寫call/apply/bind的示例代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)手寫call/apply/bind的方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下
2023-02-02