earlbread/search_text.html

## search_text.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Search Results</title>
  </head>
  <body>
    <input type="text" data-bind="textInput: searchText">
    <div data-bind="foreach: searchResult">
      <p data-bind="text: $data"></p>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
    <script>
      var ViewModel = function() {
        var self = this;
        this.searchText = ko.observable('');
        this.data = ko.observableArray([
          'dog',
          'duck',
          'lion',
          'chicken'
        ]);

        this.searchResult = ko.computed(function() {
          return ko.utils.arrayFilter(self.data(), function(animal) {
            return animal.includes(self.searchText());
          });
        });
      };

      ko.applyBindings(new ViewModel());
    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Search Results</title>
	</head>
	<body>
	<input type="text" data-bind="textInput: searchText">
	<div data-bind="foreach: searchResult">
	<p data-bind="text: $data"></p>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
	<script>
	var ViewModel = function() {
	var self = this;
	this.searchText = ko.observable('');
	this.data = ko.observableArray([
	'dog',
	'duck',
	'lion',
	'chicken'
	]);

	this.searchResult = ko.computed(function() {
	return ko.utils.arrayFilter(self.data(), function(animal) {
	return animal.includes(self.searchText());
	});
	});
	};

	ko.applyBindings(new ViewModel());
	</script>
	</body>
	</html>