JSFiddle - React, Tailwind, and code Playground

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<div>
  Filter: <input type="text" data-bind="value: FilterText"/>
  <br/><br/>
  <table>
    <tbody data-bind="foreach: VisibleItems">
      <tr>
        <td><label data-bind="text: Name"></label></td>
        <td><input type="text" data-bind="value: Value" /></td>
      </tr>                    
    </tbody>
  </table>
  <br/>
  <br/>
  <span data-bind="text: ko.toJSON(Items())"></span>
</div>

JavaScript

var viewModel = {
  Items: ko.observableArray([
    { Name: 'Jennifer', Value: ko.observable(1) },
    { Name: 'Aaron', Value: ko.observable(2) },
    { Name: 'Jason', Value: ko.observable(3) },
  ]),
  SelectedItem: ko.observable(),
  FilterText: ko.observable()  
}

viewModel.VisibleItems = ko.pureComputed(function(){
  	return viewModel.Items().filter(function(item){ 
    	if(viewModel.FilterText()){
    		return item.Name.toLowerCase().includes(viewModel.FilterText().toLowerCase()); 
      }else{
      	return viewModel.Items();
      }
    });
});

ko.applyBindings(viewModel);