搜索和排序过滤器

Posted 2023-03-27

【中文标题】搜索和排序过滤器

【英文标题】：Search and Sort Filter

【发布时间】：2020-01-18 06:55:18

【问题描述】：

搜索过滤器不适用于使用 Enter 键多次搜索元素。一次搜索一个时效果很好。 例如：如果我在特定列中搜索字母“A”，则输出应该是其中包含“A”的数据。但是，当我退格“A”并在同一列中搜索其他字母时，它会重新过滤以前的列表，这不应该是这种情况。对于每次搜索，它都需要从原始列表中过滤，而不是从已过滤的列表中过滤。

我尝试过使用 executeOnEnter & keyup。

vm.filterStatus= function () 
        if (!vm.statuses()) 
            vm.filteredStatuses([]);
        
        var filter = vm.searchTerm().toLowerCase();

        if (!filter) 
            vm.refresh();
            vm.filteredStatuses(vm.statuses());     

               
        var filtered = ko.utils.arrayFilter(vm.statuses(), function (item)             

            var fields;
            if (vm.checkForWhichFilter() == 'A') 
                fields = ["carClasses"];
            
            else if (vm.checkForWhichFilter() == 'F')
            
                fields = ["fromDepotCodes"];
            
            var i = fields.length;
            while (i--) 
                var prop = fields[i];
                if (item.hasOwnProperty(prop) && ko.isObservable(item[prop])) 
                    var strProp = ko.utils.unwrapObservable(item[prop]).toString().toLocaleLowerCase();
                    if (item[prop]() && (strProp.indexOf(filter) !== -1)) 
                        oldAppvehicle = vm.applicableVehicle();
                        return true;
                    
                
                        
            return false;
        );
        vm.statuses(filtered);
    ;

 <input type="text" class="form-control-static" data-bind="value:searchTerm ,valueUpdate: 'keyup',executeOnEnter:filterStatus" placeholder="Press enter to search..." />

对于每次搜索，它都需要从原始列表中过滤，而不是从已经过滤的列表中过滤。

【参考方案1】：

您正在过滤vm.statuses，然后将过滤后的结果保存在vm.statuses。因此，下次过滤时，您将过滤先前过滤的结果。您应该将过滤后的结果存储在一个单独的可观察数组中，以便原始的、未过滤的数组保持不变并且可以再次过滤。我在您的代码中看到了对vm.filteredStatuses 的引用，所以您可能需要做的就是更改：

vm.statuses(filtered);

到：

vm.filteredStatuses(filtered);

显然，在您的 UI 中显示 filteredStatuses 而不是 statuses。