Filter Data Using Knockout JS

Question

I have static array that have 2 set of data.

I have make 2 part of the one div and on right side show all list from array and on left side nothing. On right side have put + sign on button, on it's click that record came on left side div and working fine and at that time the plus sign become minus when that record came on left side, when click on minus sign again that record removed from left side. Just like toggle.

Now I want to filter the right side of list using textbox. It will search on 2 columns i.e. code and title. but how to make filter I don't know.

HTML Code :

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

    };

I want that when I type any character in input=text it will filter data and then show.

Any suggestion on this.

Here's Screen of this code :

Answer 1

You can use ko.computed for filtering the data.

  //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 //sorry for ui part(Html alignment) in demo.