Question

我有一个带有测试套件的observableArray，我想根据搜索字段中的文本进行过滤。每次击键后过滤都会更新，因此我正在寻找最有效的方法。

查看这个JS小提琴，了解我的问题的简化版本：

下面，您可以看到小提琴的片段。截至目前，过滤在搜索字段中获取整个文本，并检查每个测试套件的“名称”字段。

我想要的是是将过滤器文本划分为单词并在testsuite中搜索搜索字段中每个单词的每个字段。

例如，我在搜索字段中写“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);

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

建议？

Answer 1

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

下面是一个简化版本。

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);
} );

Answer 2

我使用CDN https://datatables.net/将https://cdn.datatables.net/的DataTables jQuery插件添加到您的链接小提琴中，并在您的javascript中添加了一行，并添加了ID＆＃34; theDataTable＆＃34;到您的<table>元素，以显示您可以使用DataTables做什么。

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

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

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

自定义过滤淘汰赛js observableArray

2 个答案: