Cresis,
class="guide" для заголовков
class="category" для категорий
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type='text/css'>
body {
font-family: Arial, Helvetica;
font-size: 12px;
}
table {
width: 500px;
}
tr {
height: 20px;
}
.guide {
text-decoration: underline;
text-align: center;
}
.hot {
border: 1px solid #f00;
background-color: #FFD480;
color: #000000;
}
.category {
background-color: #B0C4DE;
}
td {
border: #0000FF 1px solid;
}
</style>
<script>
$(function() {
$("input#search").on("input", function() {
var text = this.value.toLowerCase();
$("tr:not('.guide, .category') td").removeClass("hot").each(function(i, obj) {
if ($(obj).text().toLowerCase().indexOf(text) > -1 && text) $(obj).addClass("hot")
});
$("tr:not(.guide)").show().filter(function() {
var ok = $(this).is('.category');
return text && !$(".hot",ok ? $(this).nextUntil('.category'): this).length
}).hide()
var jobCount = $("tr").has('.hot').length;
$('.counter').text(jobCount + ' результат(ов)');
})
});
</script>
</head>
<body>
<input id="search" type="text"></input>
<span class="counter pull-right"></span>
<table>
<tr class="guide">
<td>First Name</td>
<td>Last Name</td>
<td>City</td>
<td>State</td>
</tr>
<tr class="category" > <td colspan="4" style="text-align:center; text-decoration:underline;">Категория 1</td> </tr>
<tr>
<td>Manix</td>
<td>Bolton</td>
<td>Merizo</td>
<td>Michigan</td>
</tr>
<tr>
<td>Azalia</td>
<td>Gallegos</td>
<td>Plainfield</td>
<td>Michigan</td>
</tr>
<tr class="category" > <td colspan="4" style="text-align:center; text-decoration:underline;">Категория 2</td> </tr>
<tr>
<td>Michael</td>
<td>Shaw</td>
<td>Rawlins</td>
<td>New Hampshire</td>
</tr>
<tr>
<td>Matthew</td>
<td>Parker</td>
<td>Chino Hills</td>
<td>Michigan</td>
</tr>
</table>
</body>
</html>