knockout.js Filter array using dropdown

This demo shows you how to filter data using dropdown

by cgough

HTML

Type

CSS

div { font-weight: bold; }

JavaScript

var ViewModel = function(data) {
    var self = this;
    self.filters = ko.observableArray(data.filters);
    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 = {
    filters: ["None", "Old", "New", "Super"],
    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.components.register('filter-component', {
		viewModel: 'ViewModel'    
})

ko.applyBindings(new ViewModel(initialData));