基于jQuery的多条件筛选搜索功能异常问题求助

问题分析 #

单独使用名称或描述筛选时数据显示正常，但同时启用两个条件时无法展示数据，核心原因是重复的事件监听导致筛选逻辑冲突：你为每个筛选控件分别绑定了单独的筛选处理，同时又绑定了联合筛选处理，操作任一控件时两个逻辑都会触发，干扰最终筛选结果。

修复步骤 #

1. 移除冗余的单独筛选监听

删除以下两段代码（它们会与联合筛选逻辑冲突）：

$('#ss-name-filter').on('propertychange change keyup paste input mouseup', function() {
    test.filter('data-name', $(this).val());
});

$('#ss-description-filter').on('propertychange change keyup paste input mouseup', function() {
    test.filter('data-description', $(this).val());
});  

2. 修正联合筛选逻辑（确保语法正确）

将联合筛选中的&&替换为JS原生的&&（HTML实体在脚本标签中会被错误解析），最终代码如下：

$('#ss-name-filter, #ss-description-filter').on('propertychange change keyup paste input mouseup', function() {
    var nameFilterValue = $('#ss-name-filter').val().toLowerCase();
    var descriptionFilterValue = $('#ss-description-filter').val().toLowerCase();

    test.filter(function(item) {
        var itemName = $(item).attr('data-name').toLowerCase();
        var itemDescription = $(item).attr('data-description').toLowerCase();

        var nameMatch = itemName.includes(nameFilterValue);
        var descriptionMatch = itemDescription.includes(descriptionFilterValue);

        return nameMatch && descriptionMatch;
    });
});  

这段逻辑天然支持三种场景：

• 名称为空时，仅按描述筛选；
• 描述为空时，仅按名称筛选；
• 两者都有值时，仅显示同时满足的项。

3. 完善simpleSort的filter方法

从你提供的代码片段看，simpleSort未完整实现自定义函数筛选的逻辑，补充以下代码到simplesort.js中：

this.filter = function(criteria, value) {
    var self = this;
    this.stashItems.each(function() {
        var $item = $(this);
        var show = true;
        
        if (typeof criteria === 'function') {
            // 处理自定义筛选函数
            show = criteria(this);
        } else {
            // 处理按属性筛选
            var itemValue = $item.attr(criteria).toLowerCase();
            show = itemValue.includes(value.toLowerCase());
        }
        
        $item.toggle(show);
    });
};

验证效果 #

• 单独输入名称：仅显示名称匹配的项；
• 单独选择描述：仅显示描述匹配的项；
• 同时设置两个条件：仅显示同时满足的项。

内容的提问来源于stack exchange，提问作者User89123