JSFiddle - React, Tailwind, and code Playground

by Juan Marco

HTML

<div class="form-group">
    <input data-bind="textInput: query, valueUpdate: 'keyup'" autocomplete="off" type="search" placeholder="Search...">
</div>
<div>
    <ul class="list-group fixed" data-bind="foreach: search()">
        <li class="list-group-item" data-bind="text: name"></li>
    </ul>
</div>

JavaScript

var places = [
{
	name: 'Comedy Cellar',
	lat: 40.730219,
	lng: -74.0005736,
	marker: null
},
{
	name: 'Carolines on Brodway',
	lat: 40.7610514,
	lng: -73.9862616,
	marker: null
},
{
	name: 'Ben\'s Pizzeria',
	lat: 40.7272897,
	lng: -74.0012167,
	marker: null
},
{
	name: 'Billy\'s Bakery',
	lat: 40.7453376,
	lng: -74.0040787,
	marker: null
}
];

var viewModel = function() {
	var self = this;
	self.locations = ko.observableArray(locations); // make the locations an obs array

	self.query = ko.observable('');


	self.locations.removeAll(this);
	self.search = ko.computed(function() {
		return ko.utils.arrayFilter(self.locations(), function(location) {
			return location.name.toLowerCase().indexOf(self.query().toLowerCase()) >= 0;
		});
	});

};