knockout.js Filter array using dropdown

This demo shows you how to filter data using dropdown

by cgough

HTML

Type
<select data-bind="options: filters, value: filter"></select>
<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.filter = ko.observable('');
    self.items = ko.observableArray(data.items);
    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 = {
    items: [{ 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));