bootstrap-select 的多选+模糊查询下拉框详解（官方示例文档解读）

引入问题

之前博主在实际开发中遇到了一个问题，就是需要既支持多选又同时支持模糊查询的下拉控件，大家所熟知的比较强大的下拉框插件bootstrap-select2，博主当时也参考过，但是发现它的多选效果做的比较差，类似这种，

 

select2下拉多选框

这样的多选控件必须要控件足够长，如果选择超过一定限制就会出现样式崩溃，你懂的~后面我无意中发现了bootstrap-select插件，瞬间发现它很高大上呀！它即可以支持单选，又支持多选，最厉害的是竟然还自带模糊查询功能！先给大家展示下炫酷的效果吧：

 

bootstrap-select下拉多选框

这样的控件不用真是可惜了，后面博主找了很多文档和博客参考，但是发现很多都没有写清楚具体的用法，只是简单的摆一个例子，并没有太大的参考价值，博主通过研究官网的相关文档以及结合自身开发经验，把bootstrap-select的用法做一个清晰的梳理，供大家参考。
官方插件地址: http://silviomoreto.github.io/bootstrap-select/
Github地址: https://github.com/silviomoreto/bootstrap-select

应用示例（参考官方文档Basic examples）

1.单选

• 简单单选
  选中默认是没有“√”的。

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

 

简单单选

• 分组单选
  注意加入optgroup标签

   <select class="selectpicker">
     <optgroup label="Picnic">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
     </optgroup>
    <optgroup label="Camping">
    <option>Tent</option>
    <option>Flashlight</option>
    <option>Toilet Paper</option>
    </optgroup>
   </select>

效果展示

 

分组单选

2.多选框

相比于单选框加入了一个multiple标签

<select class="selectpicker" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

 

多选框

3.模糊查询

添加一个data-live-search="true"的属性

<select class="selectpicker" data-live-search="true">
  <option>Hot Dog</option>
  <option>Fries</option>
  <option>Soda</option>
  <option>Burger</option>
  <option>Shake</option>
  <option>Smile</option>
</select>

效果展示

 

模糊查询

4.多选限制

添加属性data-max-options="2"或者在初始化时用maxOptionsText做限制

<select class="selectpicker" multiple data-max-options="2">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

或者在初始化selectpicker时设置maxOptionsText

$(\'.selectpicker\').selectpicker({
                \'selectedText\':\'cat\',
                \'maxOptionsText\':2;
             })

效果展示

 

多选限制

5.自定义按钮的文本

通过属性title来控制。

• 选择框文本

<select class="selectpicker" multiple title="请选择一个">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

 

选择框文本

• 选择显示单条文本
  意思就是选中相应的option，就展示option的title，比如选中"Burger, Shake and a Smile",文本框内显示Combo 2。

<select class="selectpicker">
  <option title="Combo 1">Hot Dog, Fries and a Soda</option>
  <option title="Combo 2">Burger, Shake and a Smile</option>
  <option title="Combo 3">Sugar, Spice and all things nice</option>
</select>

效果展示

 

单条文本

6.多选框格式化选择文本

通过属性 data-selected-text-format 来控制选中的值的显示
可选的值有如下4个：
1.values： 逗号分隔的选定值列表（系统默认）；
2.count： 如果选择了一个项，则显示选项值。如果选择多于一个，则显示所选项的数量,如选择2个，则下拉框显示2个已被选中；
3.count > x： 当count的值小于x时，展示逗号分隔的选定值列表;当count>x时，显示x个被选中；
4.static：无论选中什么，都只展示默认的选中文本。
下面给几个简单示例

<select class="selectpicker" multiple data-selected-text-format="count">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option>Onions</option>
</select>

效果展示

 

count格式化

<select class="selectpicker" multiple data-selected-text-format="count>3">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option>Onions</option>
</select>

效果展示

 

count>x格式化

7.样式选择

• 按钮样式
  通过data-style来设置按钮的样式

<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>

效果展示

 

按钮样式

• 单选框样式
  这里要注意一下，单选框默认是没有多选框的选中之后的"√"图标的，如果想要加上这个图标的话，需要在样式中加入show-tick即可。

<select class="selectpicker show-tick">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

 

单选框选中样式

• 菜单的箭头
  Bootstrap的菜单箭头也可以被添加进来，需要加入样式show-menu-arrow，个人感觉差别不大

<select class="selectpicker show-menu-arrow">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

效果展示

 

菜单的箭头

• style样式自定义
  bootstrap-select的样式不是死的，可以自定义style样式，类似最基本的css样式添加。

.special {
  font-weight: bold !important;
  color: #fff !important;
  background: #bc0000 !important;
  text-transform: uppercase;
}

<select class="selectpicker">
  <option>Mustard</option>
  <option class="special">Ketchup</option>
  <option style="background: #5cb85c; color: #fff;">Relish</option>
</select>

效果展示

 

style样式

• 宽度（Width）
  1.引用bootstrap的样式

<div class="row">
  <div class="col-xs-3">
    <div class="form-group">
      <select class="selectpicker form-control">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>
  </div>
</div>

2.使用data-width属性，来定义宽度，可选的值有以下4个
auto：select的宽度由option中内容宽度最宽的哪个决定；
fit：select的宽度由实际选中的option的宽度决定；
100px：select的宽度定义为100px；
50%：select的宽度设置为父容器宽度的50%。

<select class="selectpicker" data-width="auto">
   <option>cow</option>
    <option>bullaaaaaaaaaaaa</option>
    <option>ASD</option>
    <option>Bla</option>
    <option>Ble</option>
</select>
<select class="selectpicker" data-width="fit">
  <option>cow</option>
    <option>bullaaaaaaaaaaaa</option>
    <option>ASD</option>
    <option>Bla</option>
    <option>Ble</option>
</select>
<select class="selectpicker" data-width="100px">
  <option>cow</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option>
</select>
<select class="selectpicker" data-width="50%">
    <option>cow</option>
    <option>bull</option>