knockout.js Filter array using dropdown

This demo shows you how to filter data using dropdown

by cgough

HTML

Type
<input data-bind="value: transferOptions"/>
<br/><br/>
<div data-bind="text: 'Address Book Options' + transferOptions()"></div>
<ul data-bind="foreach: filteredAddressBookItems">
    <li data-bind="text: name"></li>
</ul>

CSS

div { font-weight: bold; }

JavaScript

var ViewModel = function(data) {
    var self = this;
    self.filter = ko.observable('');
    self.items = ko.observableArray(data.items);
    self.filteredAddressBookItems = 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 = {
    transferOptions: [{ name: "Corvette", type: "Old"},
           { name: "Charger", type: "Old"},
           { name: "Prius", type: "New"},
           { name: "Magnum", type: "New"},
           { name: "McLaren", type: "Super"},
           { name: "Saleen", type: "Super"}]
};

ko.applyBindings(new ViewModel(initialData));