Show in jQuery seach the closest TR that was a header from data

Question

This is my fiddle: https://jsfiddle.net/qpouvped/2/

What I want to do is display the header with the corresponding alphabetical letter of the searched name. But I had no success!

If you see the code and look for "Nanana", I want to display this line, and the gray header C, of which "Nanana" belongs.

Can anyone help me with this?

My HTML:

<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>
<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 class="subtitulo">
            <td colspan="3" class="cab_interno">A</td>
        </tr>
        <tr>
            <td >137418</td>
            <td >Nonono Nonono Nonono</td>
            <td >11225566</td>
        </tr>
        <tr class="subtitulo">
            <td colspan="3" class="cab_interno">B</td>
        </tr>
        <tr>
            <td >122222</td>
            <td >Nonono Nonono Nonono</td>
            <td >11225566</td>
        </tr>
        <tr class="subtitulo">
            <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>

My jQuery:

$(".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).parent('tbody').next('td.cab_interno').show();
            }
        });
    });

Answer 1

The alphabetic heading is a previous sibling of the closest tr , so you want to use .prevAll() . These are returned in order of distance from the current row, so the first one will be the heading for that group.

You also shouldn't process the heading rows in the .each() loop. Just hide everything first, and show the data rows that match, along with their headings.

 $(".filter-nome").keyup(function() { var value = $(this).val(); if (value == "") { // Show everything when filter is empty $(".lista-certidoes tbody tr").show(); return; } $(".lista-certidoes tbody tr").hide(); $(".lista-certidoes tbody tr:not(.subtitulo)").each(function(index) { $row = $(this); var id = $row.find("td:nth-child(2)").text(); if (id.indexOf(value) == 0) { $row.show(); $row.closest("tr").prevAll(".subtitulo").first().show(); } }); }); 

 .lista-certidoes { .cab_interno { 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> <script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <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> <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 class="subtitulo"> <td colspan="3" class="cab_interno">A</td> </tr> <tr> <td>137418</td> <td>Nonono Nonono Nonono</td> <td>11225566</td> </tr> <tr class="subtitulo"> <td colspan="3" class="cab_interno">B</td> </tr> <tr> <td>122222</td> <td>Nonono Nonono Nonono</td> <td>11225566</td> </tr> <tr class="subtitulo"> <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>