请修改一个JS文件中搜索部分的代码

首先,请下载这个js文件:
下载地址: https://www.jq22.com/demo/jquerytablePlugin201901132312/js/tableXR.js

另外,该js所在页面(方便你下载相关html代码,用于调试): 简约表格插件 https://www.jq22.com/demo/jquerytablePlugin201901132312/

需求:只是想修改一下这个js文件的搜索功能:改成支持多关键词(与)的搜索结果【也就是同时满足两个关键词的搜索结果,详见下面的图片】

其中涉及的搜索代码是这一段(75-95行,其他代码是否也和搜索相关我就不敢确定了~)

            //搜索功能

            if (searchVal !== "") {
                $('tbody', this.$ele).html('正在搜索中...');
                data = data.filter(function (d) {
                    return Object.keys(d).some(function (key) {
                        return new RegExp(searchVal).test(d[key]);
                    });
                });
                cb(data);
                if (data.length === 0) {
                    $('tbody', this.$ele).html('<tr><td colspan="' + columns.length + '">\u62B1\u6B49,\u672A\u627E\u5230\u76F8\u5173\u6570\u636E</td></tr>');

                    return false;
                }
            } else {
                $('tbody', this.$ele).html('');
                cb(undefined);
            }

改后预期:可以搜索两个关键词,两个关键词用空格隔开,只有同时包含这两个关键词的行,才是满足搜索要求的,
且:在搜索框中输入时,_这两个关键词不分先后_。

比如在搜索框中 输入 “小 B” 或 “B 小”时
都可以显示如下结果:

img

数据源可以修改如下,就会有4条满足搜索条件的结果了:

    <script type="text/javascript">
        $('#root').tableXR({
            //表格标题
            title:'学生成绩列表',
            //表格头部设置
            columns:[
                {data:'name',title:'名字'},
                {data:'age',title:'年龄'},
                {data:'store',title:'得分'},
                {data:'level',title:'等级'},
            ],
            //表格数据:
            data:[
                {name:'小红',age:'18',store:'98',level:'A'},
                {name:'小化',age:'18',store:'97',level:'A'},
                {name:'小杰',age:'15',store:'95',level:'A'},
                {name:'小刚',age:'17',store:'95',level:'A'},
                {name:'大水',age:'23',store:'97',level:'A'},
                {name:'小胡',age:'22',store:'88',level:'B'},
                {name:'热热',age:'19',store:'90',level:'A'},
                {name:'二娃',age:'17',store:'92',level:'A'},
                {name:'小瑟',age:'16',store:'89',level:'B'},
                {name:'滑板',age:'15',store:'91',level:'A'},
                {name:'小二B',age:'17',store:'95',level:'A'},
                {name:'DSD',age:'17',store:'95',level:'A'},
                {name:'曲江小区    405B',age:'17',store:'95',level:'A'},
                {name:'DSD',age:'17',store:'95',level:'A'},
            ]
        })
    </script>

完整的搜索功能的代码如下:(即在原来的代码基础之上,只需增加分割关键字和修改filter函数内部的代码即可,而不是将整个功能的代码都替换掉)

//搜索功能

if (searchVal !== "") {
    $('tbody', this.$ele).html('正在搜索中...');
    var searchItems = searchVal.split(" "); // 按空格拆分成数组
    data = data.filter(function (d) {
        var matchCount = 0; // 匹配正确的个数
        return Object.keys(d).some(function (key) {
            if(searchItems.length > 1){
                searchItems.forEach(function(item) {
                    matchCount += new RegExp(item).test(d[key]) ? 1 : 0;
                });
                return matchCount == searchItems.length; // 全部匹配正确
            }
            return new RegExp(searchVal).test(d[key]);
        });
    });
    cb(data);
    if (data.length === 0) {
        $('tbody', this.$ele).html('<tr><td colspan="' + columns.length + '">\u62B1\u6B49,\u672A\u627E\u5230\u76F8\u5173\u6570\u636E</td></tr>');

        return false;
    }
} else {
    $('tbody', this.$ele).html('');
    cb(undefined);
}

//排序功能

追加酬金到60元,看看有没有大侠出手解决哈!谢谢!

思路如下:
1、按空格拆分出要查询的 关键字,如 'B 小' 拆分成 ['B', '小']。
2、定义一个变量,用于统计匹配正确的个数。
3、遍历关键字数组进行匹配,每正确一次 计数器加1。
4、遍历结束后,判断正确次数是否正好等于数组长度。

代码如下(仅供参考,对你有帮助的话,希望能够采纳!):

var searchItems = searchVal.split(" "); // 按空格拆分成数组
data = data.filter(function (d) {
    var matchCount = 0; // 匹配正确的个数
    return Object.keys(d).some(function (key) {
        if(searchItems.length > 1){
            searchItems.forEach(function(item) {
                matchCount += new RegExp(item).test(d[key]) ? 1: 0;
            });
            return matchCount == searchItems.length; // 全匹配正确
        }
        return new RegExp(searchVal).test(d[key]);
    });
});