自定义过滤淘汰赛js observableArray

Question

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

查看此 JS-fiddle 以获得我的问题的简化版本：

在下面，您可以看到来自 fiddle 的片段。截至目前，过滤会获取搜索字段中的整个文本，并根据它检查每个测试套件的 "Name" 字段。

我想要的就是把过滤文本分词，在testsuite的每个字段中搜索搜索字段中的每个词

例如，我在搜索字段中写 "user lol"，我希望它只 return 在任何字段中包含这些词的测试套件（这里有两个测试套件有 "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

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

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

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

我从 https://datatables.net/ to your linked fiddle, using the CDN https://cdn.datatables.net/ 添加了 DataTables jQuery 插件，并向您的 javascript 添加了一行，并将 ID "theDataTable" 添加到您的 <table>元素，展示您可以使用 DataTables 做什么。

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

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

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

自定义过滤淘汰赛js observableArray

Custom filtering knockout js observableArray

html

javascript

jquery

ko.observablearray

knockout.js