Search in jQuery displaying the nearest TR as header!

Question

I GOT THE ANSWER ON THE AMERICAN STACK: https://stackoverflow.com/a/46654887/588842

I got the following HTML and JS:

FOLLOW EXTERNAL FIDDLE LINK: https://jsfiddle.net/qpouvped/

$(".filter-nome").keyup(function(){

  var valor = $(this).val();
  $(".lista-certidoes tbody tr").each(function(index){

    $row = $(this);
    var id = $row.find("td:nth-child(2)").text();
    if (id.indexOf(valor) != 0) {
      $(this).hide();
    }
    else {
      $(this).show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
    		...
    	</tbody>
    </table>

So far so good, working normal, however, I would like to leave displaying the TR that has the td with the class .cab_interno, which is the Letter corresponding to that "part" of the list.

I tried to use this below, along with the $(this).show();, but it didn’t work..

$(this).closest('tr > td.cab_interno').fadeIn('slow', function() {
    console.log("OK");
});

Somebody give me a hand there ?

Answer 1

I separated the table into several <tbody> to group the data.

After the search on input will be displayed only the tbody that has in some of its lines a name equal to the value typed in input.

It is worth remembering that the Javascript case differentiation from minuscule.

$(".filter-nome").keyup(function(){

  var valor = $(this).val();
  $(".cab_interno tr").each(function(index){
    
    //Tbody atual:
    $cabecalho  = $(this).parent("tbody"); 
    
    //linha do tbody:
    $linha      = $(this); 
    
    //Coluna nome:
    $nome       = $linha.find("td:nth-child(2)").text(); 

    if ($nome.indexOf(valor) != 0) {
      //$cabecalho.hide();
      $linha.hide();
      
    }
    else {
      $linha.show();
      $cabecalho.find("tr:first-child").show();
    }
  });
});

.cab_interno th{
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<table class="table table-stripped table-bordered lista-certidoes">
    	<thead>
    		<tr>
    			<th>Nº</th>
    			<th>Nome</th>
    			<th>Nº PROTOCOLO</th>
    		</tr>
    	</thead>
    	<tbody class="cab_interno">
    		<tr>
    			<th colspan="3">A</th>
    		</tr>
    		<tr>
    			<td>137418</td>
    			<td>Texto A</td>
    			<td>11225566</td>
    		</tr>
      </tbody>
      <tbody class="cab_interno">
    		<tr>
    			<th colspan="3">B</th>
    		</tr>
    		<tr>
    			<td>122222</td>
    			<td>Texto 1B</td>
    			<td>11225566</td>
    		</tr>
        <tr>
    			<td>122222</td>
    			<td>Texto 2B</td>
    			<td>11225566</td>
    		</tr>
    	</tbody>
      <tbody class="cab_interno">
         <tr>
            <th colspan="3">C</th>
        </tr>
        <tr>
            <td>122222</td>
            <td>Nononono</td>
            <td>11225566</td>
        </tr>
         <tr>
            <td>133</td>
            <td>Nanana Nonono Nonono</td>
            <td>11225566</td>
        </tr>
      </tbody>
    </table>