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

不念不忘少年蓝@ 2022-03-07 05:54 601阅读 0赞

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

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

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

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

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

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

![20190316172346658.jpg][]

[Link 1]: https://github.com/silviomoreto/bootstrap-select
[20190316172346658.jpg]: /images/20220307/618de25c5185408cbd07060a63e4bf6a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，601人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular 下拉搜索框实现

今天有个需求要写一个下拉搜索框，本来是下拉框的，由于内容太多，所以添加一个查找功能。根据[博客][Link 1]进行改写的。参考了他的基本框架进行实现。效果图： ![

雨点打透心脏的1/2处/ 2022年12月14日 03:58/ 0 赞/ 411 阅读

相关小程序的模糊联想搜索，下拉框选择

![在这里插入图片描述][20200828191907503.gif_pic_center] [github地址 https://github.com/pretty-git

偏执的太偏执、/ 2022年12月02日 00:59/ 0 赞/ 207 阅读

相关搜索下拉框级联

$('\cat\_type').change(function()\{ var id = $(this).children(

左手的ㄟ右手/ 2022年08月10日 16:32/ 0 赞/ 291 阅读

相关 easyui-combobox下拉框修改源码实现模糊搜索

easyui-combobox的源码中过滤器是实现首个匹配才能被搜索出来源码 filter:function(q,row){ var opts=$(t

亦凉/ 2022年07月27日 17:00/ 0 赞/ 251 阅读

相关带搜索功能的下拉选择框select2

api 地址：[ http://select2.github.io/select2/][http_select2.github.io_select2]

矫情吗；*/ 2022年06月04日 09:58/ 0 赞/ 707 阅读

相关有下拉的搜索框

今天一上就做出来这么个玩意，真的伤。。。不过总算是做出来，样式勉强能看。有需要的可以参考一下代码没有提炼比较乱就是，先看下具体样式吧 ![70][] css

淡淡的烟草味﹌/ 2022年05月22日 09:35/ 0 赞/ 291 阅读

相关 layui的下拉搜索框

html部分通过给select设定属性 lay-search 来开启搜索匹配功能，给select父级layui-form的类名，一定要搭配使用才能显示 <div c

小灰灰/ 2022年03月28日 09:37/ 1 赞/ 1672 阅读

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

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

不念不忘少年蓝@/ 2022年03月07日 05:54/ 0 赞/ 602 阅读

相关基于jQuery两种方式实现下拉框模糊搜索

基于select2 <script type="text/javascript" src="../../assets/js/plugins/select2/sel

叁歲伎倆/ 2021年12月15日 23:51/ 0 赞/ 831 阅读

相关