How to show the results of a filtered list using knockout.js?

@aniya.jaskolski 

To show the results of a filtered list using knockout.js, you can follow these steps:

1. Create an observable array in your view model to store the list of items to be filtered.
2. Create one or more observable properties in your view model to store the filter criteria.
3. Use a computed observable in your view model to filter the list based on the filter criteria.
4. Bind the filtered list to your HTML using the foreach binding to display the results.

Here's an example of how you can achieve this:

HTML:

1
2
3
4

<input type="text" data-bind="textInput: searchText, valueUpdate: 'input'" placeholder="Enter search text">
<ul data-bind="foreach: filteredItems">
    <li data-bind="text: $data"></li>
</ul>

JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

function ViewModel() {
    var self = this;
    
    self.items = ko.observableArray(['Apple', 'Banana', 'Cherry', 'Orange']);
    self.searchText = ko.observable('');
    
    self.filteredItems = ko.computed(function() {
        var searchText = self.searchText().toLowerCase();
        return ko.utils.arrayFilter(self.items(), function(item) {
            return item.toLowerCase().indexOf(searchText) !== -1;
        });
    });
}

ko.applyBindings(new ViewModel());

In this example, the user can type in the search text input field and it will dynamically filter the list of items being displayed. The filteredItems computed observable will automatically update and display the filtered results in the list.