bootstrap-select外掛實現下拉框搜尋功能
阿新 • • 發佈：2018-12-10
工作上要用到在下拉框內實現搜尋功能，原生的select標籤是不能輸入的，所以最終找到了bootstrap-select外掛，功能十分強大，支援搜尋，多選，分組選中等。
本文摘取自：
官方文件
簡單示例
下面先附上我的程式碼，實現了搜尋功能，可以直接複製下來檢視效果。
<html> <head> <script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.js"></script> <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.css"> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script type="text/javascript"> $(window).on('load', function () { $('.selectpicker').selectpicker({ 'selectedText': 'cat' }); }); </script> </head> <body> <div class="container"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="bs3Select" class="col-lg-2 control-label">Test bootstrap 3 form</label> <div class="col-lg-10"> <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> <optgroup label="test" data-subtext="another test" data-icon="icon-ok"> <option>ASD</option> <option selected>Bla</option> <option>Ble</option> </optgroup> </select> </div> </div> </form> </div> </body> </html>
附上上面js、css檔案的地址：官方地址
使用方式
1.定義class屬性selectpicker，就可以自動初始化
<select class="selectpicker"> <option value="1">廣東省</option> <option value="2">廣西省</option> <option value="3">福建省</option> <option value="4">湖南省</option> <option value="5">山東省</option> </select>
2.多選
<select class="selectpicker" multiple> <option value="1">廣東省</option> <option value="2">廣西省</option> <option value="3">福建省</option> <option value="4">湖南省</option> <option value="5">山東省</option> </select>
3.給元件加搜尋功能
<select class="selectpicker" multiple data-live-search="true">
<option value="1">廣東省</option>
<option value="2">廣西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山東省</option>
</select>4.選項分組
<select class="form-control selectpicker" data-live-search="true" multiple>
<optgroup label="廣東省">
<option value="1">廣州市</option>
<option value="2">深圳市</option>
<option value="3">珠海市</option>
</optgroup>
<optgroup label="廣西">
<option value="1">南寧市</option>
<option value="2">柳州</option>
<option value="3">桂林市</option>
</optgroup>
<optgroup label="山東">
<option value="1">煙臺</option>
<option value="2">青島</option>
<option value="3">濟南</option>
</optgroup>
</select>5.設定最多選中項為2個
<select class="selectpicker" multiple data-live-search="true" data-max-options="2">
<option value="1">廣東省</option>
<option value="2">廣西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山東省</option>
</select>6.縮略模式，比如當選中值大於3個的時候只顯示選中項的個數，注意這個屬性只對多選生效
<select class="selectpicker" multiple data-live-search="true" data-selected-text-format="count > 3">
<option value="1">廣東省</option>
<option value="2">廣西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山東省</option>
</select>7.顯示帶顏色的標籤
<select class="form-control selectpicker" title="請選擇省份" multiple>
<option data-content="<span class='label label-success'>廣東省</span>">廣東省</option>
<option data-content="<span class='label label-info'>廣西省</span>">廣西省</option>
<option data-content="<span class='label label-warning'>福建省</span>">福建省</option>
<option data-content="<span class='label label-danger'>山東省</span>">山東省</option>
</select>8.預設樣式選擇
<select class="selectpicker" data-style="btn-primary">
...
</select>
<select class="selectpicker" data-style="btn-info">
...
</select>
<select class="selectpicker" data-style="btn-success">
...
</select>
<select class="selectpicker" data-style="btn-warning">
...
</select>
<select class="selectpicker" data-style="btn-danger">
...
</select>
9.關於動態賦值。
bootstrap-select是預設只加載靜態資料的，如果你想載入到通過Ajax等方式動態新增的資料，就在生成option後呼叫方法refresh來實現更新。
$('.selectpicker').selectpicker('refresh');10.賦值取值
元件取值
var value = $('#sel').val(); 如果是多選，這裡得到的value變數是一個數組變數，形如 ['1','2','3']。
元件賦值
$('.selectpicker').selectpicker('val', '1');在一些級聯選擇的使用場景中，經常需要在賦值的時候順便觸發一下元件的change事件，我們可以這麼做。
$('.selectpicker').selectpicker('val', '1').trigger("change");如果是多選的賦值，也是一樣
$('.selectpicker').selectpicker('val', ['1','2','3']).trigger("change");11.元件其他用法
全選
$('.selectpicker').selectpicker('selectAll'); 反選
$('.selectpicker').selectpicker('deselectAll'); 適應手機模式
$('.selectpicker').selectpicker('mobile'); 元件禁用
$('.disable-example').prop('disabled', true);
$('.disable-example').selectpicker('refresh');元件啟用
$('.disable-example').prop('disabled', false);
$('.disable-example').selectpicker('refresh');元件銷燬
$('.selectpicker').selectpicker('destroy');12.補充說明
使用bootstrap-select必須引入下面四個檔案
如果你的專案裡同時使用了H-ui，恭喜你，你要被坑了，因為這四個檔案和h-ui.min.js和h-ui.min.css衝突，所以你可能遇到點選下拉框不彈窗的情況。建議用合理的順序引入這幾個檔案，避免衝突。