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

博主最近在完成公司的一个需求,需要使用到下拉选择框模糊搜索,爬了一次坑,跟大家分享一下

       博主最近在完成公司的一个需求,需要使用到下拉选择框模糊搜索,爬了一次坑,跟大家分享一下,因为使用的是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');

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


0条评论

发表评论