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

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

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

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

心血來(lái)潮，想換個(gè)框架寫后臺(tái)，然后用Bootstrap搭了個(gè)架子，然后兩種樣式?jīng)_突，百度了一把，找到了另一個(gè)牛逼的基于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í)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

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

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

您可能感興趣的文章:

相關(guān)文章

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