基于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