之前用Easyui框架下做的下拉框選擇，雖然可以搜索，但是有諸多的不便：比如，不能模糊匹配，必須按照第一個(gè)字母來搜索
心血來潮，想換個(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)教程
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
