hinchley/Knockout Live Search

## Knockout Live Search
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>User Search</title>
<meta name="viewport" content="width=device-width">
<style>
  body { margin: 2em; text-align: center; }
  form { margin-bottom: 2em; }
  table { text-align: left; margin: 0 auto; }
  th, td { padding: .2em; }
</style>
</head>

<body>
<div id="container">
<h1>User Search</h1>
<form>
  <input id="search" type="search" name="search" placeholder="Search for a user" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off" />
</form>

<table data-bind="visible: users().length > 0">
  <thead><tr><th>Id</th><th>Name</th></tr></thead>
  <tbody data-bind="foreach: users">
    <tr>
      <td data-bind="text: id"></td>
      <td data-bind="text: name"></td>
    </tr>
  </tbody>
</table>
</div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script>
var users = [
  { id: 'Jack', name: 'Jack Smith' },
  { id: 'Jill', name: 'Jill Jones' },
  { id: 'Jane', name: 'Jane Chung' }
];

var viewModel = {
  users: ko.observableArray([]),
  query: ko.observable(''),

  search: function(value) {
    viewModel.users.removeAll();

    if (value == '') return;

    for (var user in users) {
      if (users[user].name.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
        viewModel.users.push(users[user]);
      }
    }
  }
};

viewModel.query.subscribe(viewModel.search);
ko.applyBindings(viewModel);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>User Search</title>
	<meta name="viewport" content="width=device-width">
	<style>
	body { margin: 2em; text-align: center; }
	form { margin-bottom: 2em; }
	table { text-align: left; margin: 0 auto; }
	th, td { padding: .2em; }
	</style>
	</head>

	<body>
	<div id="container">
	<h1>User Search</h1>
	<form>
	<input id="search" type="search" name="search" placeholder="Search for a user" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off" />
	</form>

	<table data-bind="visible: users().length > 0">
	<thead><tr><th>Id</th><th>Name</th></tr></thead>
	<tbody data-bind="foreach: users">
	<tr>
	<td data-bind="text: id"></td>
	<td data-bind="text: name"></td>
	</tr>
	</tbody>
	</table>
	</div>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
	<script>
	var users = [
	{ id: 'Jack', name: 'Jack Smith' },
	{ id: 'Jill', name: 'Jill Jones' },
	{ id: 'Jane', name: 'Jane Chung' }
	];

	var viewModel = {
	users: ko.observableArray([]),
	query: ko.observable(''),

	search: function(value) {
	viewModel.users.removeAll();

	if (value == '') return;

	for (var user in users) {
	if (users[user].name.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
	viewModel.users.push(users[user]);
	}
	}
	}
	};

	viewModel.query.subscribe(viewModel.search);
	ko.applyBindings(viewModel);
	</script>
	</body>
	</html>