<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-3">
<form action="#" method="get">
<div class="input-group">
<!-- USE TWITTER TYPEAHEAD JSON WITH API TO SEARCH -->
<input class="form-control" id="system-search" placeholder="Search for" required>
</div>
</form>
</div>
<div class="col-md-9">
<table class="table table-list-search">
<tbody>
<tr>
<td>USERS</td>
<td>Franco</td>
<td>200 users are currently using LiFE</td>
</tr>
<tr>
<td>RESOURCES</td>
<td>IU Karst https://kb.iu.edu/d/bezu</td>
<td>15 results</td>
</tr>
<tr>
<td>DATA SETS</td>
<td>LiFE Demo https://purl.stanford.edu/cs392kv3054</td>
<td>122 results</td>
</tr>
<tr>
<td>SERVICES</td>
<td>LiFE repository: www.github.com/francopestilli/life</td>
<td>12 results</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
body {
margin-top: 2%
}
$(document).ready(function() {
var activeSystemClass = $('.list-group-item.active');
//something is entered in search form
$('#system-search').keyup( function() {
var that = this;
// affect all table rows on in systems table
var tableBody = $('.table-list-search tbody');
var tableRowsClass = $('.table-list-search tbody tr');
$('.search-sf').remove();
tableRowsClass.each( function(i, val) {
//Lower text for case insensitive
var rowText = $(val).text().toLowerCase();
var inputText = $(that).val().toLowerCase();
if( rowText.indexOf( inputText ) == -1 )
{
//hide rows
tableRowsClass.eq(i).hide();
}
else
{
$('.search-sf').remove();
tableRowsClass.eq(i).show();
}
});
//all tr elements are hidden
if(tableRowsClass.children(':visible').length == 0)
{
tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>');
}
});
});