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;
        }