bootstrap-select search后台查询

   对比了多款bootstrap系列的插件，最终还是选择了bootstrap-select。选择他的原因是他比较简洁大方。但是在使用的过程中还是发现了一些使用的问题。在这我一一道来。

　https://www.geek-share.com/detail/2662989982.html（其他两种select参考）

　首先我的业务需求是

1. 可以多选　
2. 搜索框可以模糊查询，可以后台查询。

　　当然主要的实现难度是在第二个环节

　　　bootstrap-select的 search是在已经存在的option中进行筛选的，由于我的下拉框数据基数过于庞大，我是用oninput执行数据填充操作。实现代码如下，我是把后台请求的所有数据缓存在浏览器中，每次去浏览器缓存中拿到数据并填充到select中，记住一定要在append之后执行$('.selectpicker').selectpicker('refresh');不然无法显示，如果追加过后的下拉框过于长的话你也可以设置显示的长度$('.selectpicker').selectpicker({actionsBox: true, //全选，取消全选按钮liveSearch: true,size:6});

document.getElementById("bs-searchbox").oninput = function () {
var keyword = $("#bs-searchbox  input").val();
if (keyword.length > 3)//当字符长度等于四的时候返回查询结果
{
var ssdata = sessionStorage.getItem("CarList");
if (ssdata != null) {
var html = "";
var jsondata = JSON.parse(ssdata);
var returnarr = ArrayLike(jsondata, keyword)
_.each(returnarr, function (d) {
html += '<option value=' + d.CarID + '>' + d.CarName + '</option>';
})
$(".selectpicker").append(html);
$('.selectpicker').selectpicker('refresh');

}
}
//if (keyword.length ==0) {
//    if ($(".bs-searchbox").nextAll("ul") != null) {
//        $(".bs-searchbox").nextAll("ul").remove();
//    }
//}
}

function ArrayLike(array, keyWord)
{
//正则表达式
//方法一
var arr = [];
var reg = new RegExp(keyWord);
//_.filter(array, function (obj) {
//    return obj.CarName.match(reg);
//});

_.each(array, function (d) {
if (d.CarName.match(reg)) {
arr.push(d);
}
})

//方法二
//var reg = new RegExp(keyWord);
//for (var i = 0; i <  array.length; i++) {
//    //如果字符串中不包含目标字符会返回-1
//    //方式一正则
//    if (array[i].CarName.match(reg)) {
//        arr.push(array[i]);
//    }
//    //方式二字符串匹配
//    //if (array[i].CarName.indexOf(keyWord) >= 0) {
//    //    arr.push(array[i]);
//    //}
//}
return arr;
}

转载于:https://www.cnblogs.com/xiabuyanyu/p/7885161.html