knockout.js Filter array using dropdown

This demo shows you how to filter data using dropdown

by cgough

HTML

Type
<input data-bind="value: filter"/>
<br/><br/>
<div data-bind="text: 'Cars ' + filter()"></div>
<ul data-bind="foreach: filteredItems">
    <li data-bind="text: name"></li>
</ul>

CSS

div { font-weight: bold; }

JavaScript

var ViewModel = function(data) {
    var self = this;
    self.addressBooktype = ko.observableArray(data.addressBooktype);
    self.filter = ko.observable('');
    self.items = ko.observableArray(data.transferOptions);
    self.filteredItems = ko.computed(function() {
        var filter = self.filter();
        if (!filter || filter == "None") {
            return self.items();
        } else {
            return ko.utils.arrayFilter(self.items(), function(i) {
                return i.type == filter;
            });
        }
    });
};


var initialData = {
    addressBooktype: ["None", "contactdetails", "name"],
    transferOptions: [{ name: "adam", contactdetails: "0123456"},
           { name: "Mary", contactdetails: "78974158"},
           { name: "James", contactdetails: "[email protected]"}
          ]
};

ko.applyBindings(new ViewModel(initialData));