javascript - 使用 Knockout JS 过滤数据

Question

我有包含 2 组数据的静态数组。

我已经制作了一个 div 的 2 部分，右侧显示了数组中的所有列表，左侧什么也没有。在右侧放置了 + 符号按钮，单击该按钮时，记录出现在左侧 div 上并且工作正常，此时，当该记录出现在左侧时，加号变为减号，当单击再次减号表示记录从左侧删除。就像切换一样。

现在我想使用文本框过滤列表的右侧。它将搜索两列，即代码和标题。但我不知道如何制作过滤器。

HTML 代码:

 <div class="col-md-6">
    <div class="col-md-4">
        <input type="text" required id="filterD" class="form-control" data-bind=""/>
    </div>
    <!-- ko foreach: controlFields -->
    <div class="row">
        <div class="col-md-11 table-bordered">
            <div class="form-group" style="padding-top: 3px;">
                <div class="col-md-2" data-bind="text:code">
                </div>
                <div class="col-md-7" data-bind="text:title">
                </div>
                <div class="col-md-1" data-bind="text:i1">
                </div>
                <div class="col-md-1" data-bind="text:i2">
                </div>
                <div>
                    <!-- ko ifnot : viewFlag -->
                    <button class="btn-primary btn-xs" data-bind="click: $root.addField">
                        <i class="glyphicon glyphicon-plus-sign"></i>
                    </button>
                    <!-- /ko -->
                    <!-- ko if : viewFlag -->
                    <button class="btn-primary btn-xs" data-bind="click: $root.removeField">
                        <i class="glyphicon glyphicon-minus-sign"></i>
                    </button>
                    <!-- /ko -->
                </div>
            </div>
            <!-- ko foreach: subFields -->
            <div style="padding-top: 3px" class="form-group" data-bind="attr:{'title':description()}">
                <div class="col-md-2">
                </div>
                <div style="border-top: 1px solid #ddd; " class="col-md-2" data-bind="text:code">
                </div>
                <div style="border-top: 1px solid #ddd; " class="col-md-7" data-bind="text:title">
                </div>
                <div>
                    <button class="btn-primary btn-xs"><i class="glyphicon glyphicon-plus-sign"></i></button>
                </div>
            </div>
            <!-- /ko -->
        </div>
    </div>
    <br />
    <!-- /ko -->
</div>

JavaScript:

var exports = {},
        ViewModel, ControlField , SubField;

    SubField = function(code, title,data,description){
        var self = this;
        self.code = ko.observable(code);
        self.title = ko.observable(title);
        self.data = ko.observable(data);
        self.description = ko.observable(description);
    };

    ControlField = function(code, title, i1, i2){
        var self = this;
        self.code = ko.observable(code);
        self.title = ko.observable(title);
        self.i1 = ko.observable(i1);
        self.i2 = ko.observable(i2);
        self.subFields = ko.observableArray([]);
        self.viewFlag = ko.observable(false);
    };

    ViewModel = function(data) {
        var self = this;

        self.controlFields = ko.observableArray([]);

        var controlField = new ControlField("100","BookTitle","0","1");
        self.controlFields.push(controlField);

        controlField.subFields().push(new SubField("a","Title","JAVA","For Entering Item Title Data"));
        controlField.subFields().push(new SubField("p","Section","2","For Section"));

        var controlField1 = new ControlField("245","Author","1","0");
        self.controlFields.push(controlField1);

        controlField1.subFields().push(new SubField("a","Name","Herbert","Name of The Author"));
        controlField1.subFields().push(new SubField("d","Place","Ontario","Place of Author"));

        self.addField = function(field){
            field.viewFlag(true);
        };
        self.removeField = function(field){
            field.viewFlag(false);
        };

    };

我希望当我在 input=text 中输入任何字符时，它会过滤数据然后显示。

对此有何建议。

这是此代码的屏幕:

Answer 1

您可以使用 ko.compulated 来过滤数据。

  //filter html binding
  <input type="text" required id="filterD" class="form-control" data-bind="value:filter,valueUpdate: 'keyup'" />// use valueUpdate binding


  //bind filter to filter text
  self.filter = ko.observable();

  //Use filteredList in html binding instead of controlFields
  self.filteredList = ko.computed(function () {
    var filter = self.filter(),
        arr = [];
    if (filter) {
        ko.utils.arrayForEach(self.controlFields(), function (item) {
            if (item.code() == filter || item.title() == filter) {
                arr.push(item);
            }

        });
    } else {
        arr = self.controlFields();
    }
    return arr;

});

Fiddle Demo//抱歉演示中的 ui 部分(Html 对齐)。