bootstra select 下拉框多选，搜索效果

此处采用bootstrap-select插件,引入css和js
bootstrap-select.css
bootstrap-select.js
bootstrap-select.min.css

bootstrap-select.min.js

html 代码：

<div class="col-xs-12" style="height: 60px;color: white;margin-top: 10px;">
<div style="width: 20%;margin-left: 4%;float: left;height: 60px;">
年级：
<select id="" class="selectpicker bla bla bli"  data-live-search="false">
<option selected>选择年级</option>
<option>一年级</option>
<option>二年级</option>
<option>三年级</option>
<option>四年级</option>
<option>五年级</option>

</select>
</div>
<div style="width: 20%;margin-left: 4%;float: left;height: 60px;">
学期：
<select id="" class="selectpicker bla bla bli"  data-live-search="false">
<option selected>选择学期</option>
<option>上学期</option>
<option>下学期</option>
</select>
</div>
<div style="width: 20%;margin-left: 4%;float: left;height: 60px;">
考试名称：
<select id="" class="selectpicker bla bla bli"  data-live-search="false">
<option selected>选择考试</option>
<option>一月考试</option>
<option>二月考试</option>
<option>期中考试</option>
<option>四月考试</option>
<option>五月考试</option>
<option>六月考试</option>
</select>
</div>
<div class="form-group" style="width: 20%;margin-left: 4%;float: left;height: 60px;">
                科目：
<select id="id_select" class="selectpicker bla bla bli" multiple data-live-search="true">
<option selected>选择科目</option>
<option>语文</option>
<option>数学</option>
<option>英语</option>
<option>物理</option>
<option>化学</option>

</select>


</div>
</div>

js代码：

<script type="text/javascript">
$(window).on('load', function() {


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


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

});

</script>

页面效果：