JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.angularjs.org/0.9.17/angular-0.9.17.js" ng:autobind></script>
<!-- AngularJS Example Code: -->
<div ng:controller="FilterCtrl">
<div ng:init="friends = [{last_name : 'Nation'}, {last_name : 'Akins'}, {last_name : 'Akins'}, {last_name : 'Batson'}, {last_name : 'Christ'}, {last_name : 'Diaz'}, {last_name : 'Gearcia'}, {last_name : 'Garcia'}, {last_name : 'Jocelyn'}, {last_name : 'Ehr'} ]"></div>
Search: <input name="searchText"/>
<table id="searchTextResults">
<tr><th>Name</th><th>Phone</th><tr>
<tr ng:repeat="friend in friends.$filter(doFilter)">
<td>{{friend.last_name}}</td>
<tr>
</table>
</div>
CSS
.ng-invalid { border: 1px solid red; }
body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
.error { color: red; }
JavaScript
function FilterCtrl() {
var scope = this;
scope.doFilter = function(elem) {
if(!scope.searchText) return true;
return elem.last_name.toLowerCase().indexOf( scope.searchText.toLowerCase()) == 0;
};
}