JSFiddle - React, Tailwind, and code Playground

HTML

Filter: <input data-bind="value: searchTerm, valueUpdate: 'afterkeydown'" />
<hr/>
<ul data-bind="foreach: items()">
    <li data-bind="text: title"></li>
</ul>
<hr/>

JavaScript

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);