JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div class="row">
<div class="col-12 col-lg-4">
<label for="nome">Nome</label>
<input type="text" class="form-control filter-nome" value="">
</div>
<div class="col-12 col-lg-4">
<label for="oab">Nº</label>
<input type="text" class="form-control filter-oab" value="">
</div>
<div class="col-12 col-lg-4">
<label for="protocolo">Nº Protocolo</label>
<input type="text" class="form-control filter-protocolo" value="">
</div>
</div>
<table class="table table-stripped table-bordered lista-certidoes">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Nº PROTOCOLO</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3" class="cab_interno">A</td>
</tr>
<tr>
<td >137418</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
<tr>
<td colspan="3" class="cab_interno">B</td>
</tr>
<tr>
<td >122222</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
<tr>
<td colspan="3" class="cab_interno">C</td>
</tr>
<tr>
<td >122222</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
<tr>
<td >133</td>
<td >Nanana Nonono Nonono</td>
<td >11225566</td>
</tr>
</tbody>
</table>
SCSS
.lista-certidoes{
.cab_interno{
background-color: #333;
color: #fff;
text-align: center;
padding: 8px;
}
}
JavaScript
$(".filter-nome").keyup(function(){
var value = $(this).val();
$(".lista-certidoes tbody tr").each(function(index){
$row = $(this);
var id = $row.find("td:nth-child(2)").text();
if (id.indexOf(value) != 0) {
$(this).hide();
} else {
$(this).show();
$(this).closest('tr > td.cab_interno').fadeIn('slow', function() {
console.log("OK");
});
}
});
});