bootstrap-select search后台查询
对比了多款bootstrap系列的插件,最终还是选择了bootstrap-select。选择他的原因是他比较简洁大方。但是在使用的过程中还是发现了一些使用的问题。在这我一一道来。
https://www.cnblogs.com/landeanfen/p/5099332.html(其他两种select参考)
首先我的业务需求是
- 可以多选
- 搜索框可以模糊查询,可以后台查询。
当然主要的实现难度是在第二个环节
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; }