JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<input type="text" placeholder="Search for names..." data-bind="textInput: search">

<ul data-bind="foreach: filteredItems">
  <li data-bind="text: name"></li>
</ul>

JavaScript

$(function() {
  var data = [
    {name: "Billy"},
    {name: "Bob"}, 
    {name: "Joe"}, 
    {name: "Jane"}, 
    {name: "Jill"}
  ];

  function ViewModel() {
  	var self = this;
    self.search = ko.observable("");
    self.listOfItems = ko.observableArray(data);
    self.filteredItems = ko.computed(function() {
    	return self.listOfItems().filter(function(item) {
      	return item.name.toLowerCase().indexOf(self.search().toLowerCase()) === 0;
      });
    });
  }
  
  var viewModel = new ViewModel();

  ko.applyBindings(viewModel);
});