基于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"  data-live-search="true"  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