bootstrap-select search后台查询

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

　https://www.cnblogs.com/landeanfen/p/5099332.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;
        }