基于bootstrap selectpicker ，实现select下拉框模糊查询功能

1、html代码块

需要引入bootstrap的css js jquery

bootstrap.css

bootstrap-select.min.css

jquery-1.11.3.min.js

bootstrap.min.js

bootstrap-select.min.js

<select class="selectpicker show-tick" style="outline: none;width:200px;" data-live-search="true" id="select_article" name="select_article">
    <option value="" data-name="">请选择物品</option>
</select>

2、js代码

$(‘.selectpicker‘).selectpicker({
            noneSelectedText: ‘‘,
            noneResultsText: ‘‘,
            liveSearch: true,
            size:5   //设置select高度，同时显示5个值
});

$(window).on(‘load‘, function () {    var sid = $("#select_article").val();    $(‘.selectpicker‘).selectpicker(‘val‘, ‘‘);    $(‘.selectpicker‘).selectpicker(‘refresh‘);    $.ajax({        method:‘POST‘,        url:‘get_items‘,        dataType:‘json‘,        success: function (res) {            var html="<option value=‘0‘>请选择物品</option>";            console.log(res);            for (var i = 0; i < res.content.length; i++) {                if (sid == res.content[i].tid) {                    html += "<option  value=‘" + res.content[i].tid + "‘ selected=‘selected‘ data-name=‘"+res.content[i].name+"‘>" + res.content[i].name + "</option>";                } else {                    html += "<option  value=‘" + res.content[i].tid + "‘ data-name=‘"+res.content[i].name+"‘>"+ res.content[i].name + "</option>";                }            }            $("#select_article").html(html);            $(‘.selectpicker‘).selectpicker(‘refresh‘);//加载select框选择器        }    });});

插件功能还是比较强大，做出来后还是有点欣喜的  唉  原谅我这烂烂的js

原文地址：https://www.cnblogs.com/pfdltutu/p/9019234.html