使用bootstrap-select实现下拉菜单的模糊搜索，支持单选和多选功能

初次使用bootstrap-select时遇到了不懂的地方在这里贴一下我遇到的问题，希望会对大家有帮助

首先引入所需要的文件

<link href="/bootstrap-select-1.12.4/dist/css/bootstrap-select.min.css" rel="stylesheet" />

<script src="/bootstrap-select-1.12.4/dist/js/bootstrap-select.min.js"></script>

其次我们需要一个select标签

<select id="ccc1" class="form-control form-angle input-sm breadth-form col-sm-9 selectpicker1" data-live-search="true">

在使用我们的插件提供的方法加载下拉框

$(window).on('load', function () {
    $('.selectpicker').selectpicker({
        'selectedText': 'cat'
    });
});

可以看到我们这里多了一个参数 这个参数是开启我们的搜索框  data-live-search="true"

效果图如下 这是一个下拉搜素的单选

图如下

在调数据时也遇到了问题，就是数据完全不显示，点击没反应，我就自己笨笨的手动加上了。给大家贴段代码看看，这是我写的请求成功后的代码

$ccc1.html("");
$ccc1.append("<option value=''>请选择</option>");
for(var i in returnData.outputParamList){
    $ccc1.append("<option value="+returnData.outputParamList[i].key+">"+returnData.outputParamList[i].value+"</option>");
}
var liList = $ccc1.siblings(".bootstrap-select").find("ul");
liList.find("li").remove();
liList.append("<li data-original-index= ><a tabindex=  data-normalized-text=\"<span class=&quot;text&quot;>请选择</span>\" data-tokens=\"null\"><span class=\"text\">请选择</span><span class=\"glyphicon glyphicon-ok check-mark\"></span></a></li>");
for(var i in returnData.outputParamList){
    liList.append("<li data-original-index="+i+"><a tabindex="+i+"  data-normalized-text=\"<span class=&quot;text&quot;>"+returnData.outputParamList[i].value+"</span>\" data-tokens=\"null\"><span class=\"text\">"+returnData.outputParamList[i].value+"</span><span class=\"glyphicon glyphicon-ok check-mark\"></span></a></li>");
}
$('.selectpicker').selectpicker('refresh');

后来发现根本不需要手动将插件所加载的部分手动加上。。苦逼的我呀，当初一点一点的拼上了，只需要调用插件的方法就可以

$('.selectpicker').selectpicker('refresh');

切记，他会自己加载的，自己拼的时候会产生各种问题，事件什么的都绑定不上。

下面说一下，下拉搜索多选的情况，需要引用的东西和单选是一样的，唯一不同的就是select部分

<select id="id_select" class="form-control form-angle input-sm breadth-form col-sm-9 selectpicker" multiple data-live-search="true"></select>

对比两个select，你会发现，他就多了一个“multiple”，只要加上这个配置项就可以实现下拉多选了。

多选就会有全选的情况出现，我当初没有仔细的翻看bootstrap-select 的API，其实它提供了很多api。在的不断的搜索下发现了一个里面提供很全api的网址，在这里分享给大家 https://www.jianshu.com/p/4759623498af

我也是看了这篇文字发现很多好用的方法，我写的时候还没有看到这篇文章，全选的功能是我自手动加上的。想哭，也给大家看一下我自己写的手动加全选功能的代码，里面其实也是调用了api

if($this.find("span").text() == "全部"){
    if($this.parent().hasClass("selected")){
        $('.selectpicker').selectpicker('selectAll');
    }else {
        $('.selectpicker').selectpicker('deselectAll');
    }
}

其实适用这个插件很简单，只不过没有好好的看api导致自己走了很多弯路

最后在说一下测试时遇到的情况，作为前端开发人员，用到的浏览器最多的都是谷歌浏览器，其他浏览器几乎都不用，但是后他开发人员，测试人员等等，都习惯使用火狐浏览器，每个人的版本都不同，结果问题出现了，测试时，发现模糊搜索的时候输入英文数字都没有问题，但是输入中文的时候，第一个输入的字母变为了空格，后面输入的正常，有的人火狐没问题，但是有的就有问题，在我这种百度下，发现了一个解决问题的方法，网址分享给大家 http://www.gbtags.com/gb/share/5785.htm

还有就是这里面说的代码和我下载的插件代码不一致，这应该是插件版本不一样的问题导致的，大家仔细看一下也能找到相对应的代码。

其实这个输入中文有问题的这个bug我是不知道这么改好不好用，结果是测试时没有问题。希望这个可以帮助到大家