自定义过滤淘汰js observableArray

Custom filtering knockout js observableArray

本文关键字：observableArray js 淘汰 过滤 自定义      更新时间：2023-09-26

我有一个带有测试套件的observableArray，我想根据搜索字段中的文本对其进行筛选。过滤在每个关键笔划后都会更新，所以我正在寻找最有效的方法。

看看这个JS fiddle，了解我的问题的简化版本：

http://jsfiddle.net/LkqTU/23180/

下面，你可以看到小提琴的片段。到目前为止，过滤会获取搜索字段中的全部文本，并对照它检查每个测试套件的"名称"字段

我想要的是将筛选文本划分为单词，并在测试套件中的每个字段中搜索搜索字段中的每个单词。

例如，如果你在搜索字段中写"user-lol"，我希望它只返回在任何字段中包含这些单词的测试套件（这里两个测试套件的名称中有"user"，一个在描述中有"lol"）。

self.filteredTestsuites = ko.computed(function () {
    // If many white spaces in a row, replace with only one white space
    fText = self.filterText().replace(/'s+/g, ' ');
    // If there is anything in the search box, filter for this
    // As of now this does not divide the filterText and only searches the Name field
    var filteredCollection = ko.utils.arrayFilter(self.testsuites(), function(test) {
        if(fText.length)
            return ( test.name.toUpperCase().indexOf(fText.toUpperCase()) >= 0);
        else
            return 1;
    });
    return filteredCollection;
}, self);

我的问题是如何最有效地进行搜索？一个可能的解决方案是，对于搜索字段中的每个单词，我搜索当前测试套件中的每个字段。然而，我想要一个更通用的解决方案，其中我不必指定字段（例如名称、描述等），而且我也不确定这种方法的效率。

建议？

我以前使用的一个简单解决方案是将所有可搜索的键/文本键合并为一个长的可搜索文本，并使用它进行所有搜索。

下面是一个稍微简化的版本。

http://jsfiddle.net/rainerpl/v2krqev5/2/

function ViewModel(){
    var self = this, x, i, suits;
    self.filterText = ko.observable(""); // Text from search field
    // Collection of testsuites
    self.testsuites = ko.observableArray([
        { name: "Register User", description: "Bla bla bla", etc: "Many more fields..." },
        { name: "Delete User", description: "some description", etc: "Many more fields" },
        { name: "Send Money", description: "na-na-na bat man", etc: "Many more fields" }
    ]);
    suits = self.testsuites();
    for ( i = 0; i < suits.length; i++) {
        suits[i]["search_content"] = ">";
        for ( x in suits[i] ) {
            if ( !suits[i].hasOwnProperty(x) || x == "search_content" || typeof suits[i][x] !== "string") {continue;}
            suits[i]["search_content"] += suits[i][x].toUpperCase();
        }
    }
    // Collection of testsuites after going through search filter
    self.filteredTestsuites = ko.computed(function () {
        var reg;
        // If many white spaces in a row, replace with only one white space
        fText = self.filterText().replace(/'s+/gi, '|');
        fText = fText.replace(/'|'s*$/gi, '');
        console.log("regex:", fText);
        reg = new RegExp(fText, "gi");
        // If there is anything in the search box, filter for this
        // As of now this does not divide the filterText and only searches the Name field
        var filteredCollection = ko.utils.arrayFilter(self.testsuites(), function(test) {
            if(fText.length)
                return test.search_content.match(reg);
            else
                return 1;
        });
        return filteredCollection;
    }, self);
}
$(document).ready( function(){
    var vm = new ViewModel();
    ko.applyBindings(vm);
} );

我添加了来自https://datatables.net/到您链接的fiddle，使用CDNhttps://cdn.datatables.net/，并在javascript中添加了一行，并在<table>元素中添加了id"theDataTable"，以显示可以使用DataTables执行的操作。

$('#theDataTable').dataTable();

http://jsfiddle.net/LkqTU/23185/

您可以进行更多的自定义，但这个简单的示例显示了使用它对表中的所有字段进行搜索、排序和筛选是多么容易。

相关文章：