Question

我有一组有两组数据的静态数组。

我制作了一个div的2个部分，右侧显示了数组中的所有列表，左侧没有任何内容。在右侧已经在按钮上放了+符号，在它上面点击该记录来自左侧div并正常工作，当时该记录出现在左侧，当点击时加号变为负号在减号上再次从左侧删除记录。就像切换一样。

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

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中输入任何字符时，它会过滤数据然后显示。

对此提出任何建议。

此代码的屏幕： enter image description here

Answer 1

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

  //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 part（Html alignment）抱歉。

使用Knockout JS过滤数据

1 个答案: