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');

       這樣我們下拉選擇框便支持模糊搜索功能。