bootstap下拉选择框实现模糊搜索

       博主最近在完成公司的一个需求，需要使用到下拉选择框模糊搜索，爬了一次坑，跟大家分享一下，因为使用的是bootstrap的插件，所以也是百度了下如何实现，在这个过程也是爬了次坑，再次跟大家分享一下。

       这里是bootstrap的select插件github地址->点击跳转

       下载完整个包之后，我们需要引入以下几个文件，一个都不能少：

<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="/css/bootstrap.min.css" >
<link rel="stylesheet" href="/css/bootstrap-select.min.css" >
<script src="/js/bootstrap.min.js" ></script>
<script src="/js/bootstrap-select.min.js" ></script>

       下面是使用代码：

<select class="selectpicker">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
    <option value="5">E</option>
</select>

这个地方记住，要引用selectpicker类样式，还要加入一句data-live-search="true"。

       接下来就是一个坑了，完成以上操作，记住，要加入以下两句，不然下拉框有时加载出来有时加载不出来，代码如下：

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

       这样我们下拉选择框便支持模糊搜索功能。

       更多分享请关注微信公众号