function metaData (data) { var self = this; self.title = data.title; } function ViewModel() { var self = this; self.searchTerm = ko.observable(''); self.items = ko.observableArray([ new metaData({title: 'aaa'}), new metaData({title: 'bbb'}), new metaData({title: 'ccc'}), new metaData({title: 'cdc'}), new metaData({title: '中文龜'}), new metaData({title: 'cdA'}) ]); self.items_bk = ko.observableArray(self.items()); self.FilteredItems = ko.computed(function(){ if(self.searchTerm().length > 0){ self.items( ko.utils.arrayFilter(self.items_bk(), function(item){ return (item.title.toLowerCase().indexOf( self.searchTerm().toLowerCase()) > -1) })); } else { self.items( self.items_bk); } }); } var calendarViewModel = new ViewModel(); ko.applyBindings(calendarViewModel);
Filter: <input data-bind="value: searchTerm, valueUpdate: 'afterkeydown'" /> <hr/> <ul data-bind="foreach: items()"> <li data-bind="text: title"></li> </ul> <hr/>