Query records in table with jQuery

Question

I created a input[type='text'] and a table HTML, and by entering a term in the field input[type='text'] the code I queried strings within all <tr><td></td></tr> and hides what does not exist in the terms, the goal is to filter table results to locate a record quickly.

<div class="row">
    <form class="form-inline" id="searchForm" onSubmit="return false;">
        <div class="form-group">
            <input type="text" id="searchItem" class="form-control" placeholder="Buscar por termos na tabela">
        </div>
    </form>
</div>

<div class="row">
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <td>#ID</td>
                <td>Prévia</td>
                <td>Titular</td>
                <td>Relatório</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>948576</td>
                <td><img class='LazyLoad' src='' data-url='./uploads/thumb/{[TRACK_IMG]}'></td>
                <td>João Nascimento Alcântara</td>
                <td><button>Gerar</button></td>
            </tr>
            <tr>
                <td>857541</td>
                <td><img class='LazyLoad' src='' data-url='./uploads/thumb/{[TRACK_IMG]}'></td>
                <td>Joao de Nascimento Alcantara</td>
                <td><button>Gerar</button></td>
            </tr>
        </tbody>
    </table>
</div>

And Javascript:

<script>
$(document).ready(function(){
    $("#searchItem").on('keyup', function() {
        var conta = $("#searchItem").val();
        if(conta.length == 0) {
            $("table.table tbody tr").removeAttr('style');
        }
    });
    $('#searchItem').on('keyup', function(e){
        e.preventDefault();
        var input = document.getElementById("searchItem");
        var conta = $("#searchItem").val();
        if(conta.length >= 3) {
            var filter = input.value.toLowerCase();
            var nodes = $("table.table tbody tr");
            for (i = 0; i < nodes.length; i++) {
                if (nodes[i].innerText.toLowerCase().includes(filter)) {
                } else {
                    $(nodes[i]).attr('style','display:none');
                }
            }
        }
    });
});
</script>

What happens is that if I type Joao (without accent) the code does not recognize John and so hides the line of the record, I want the code to recognize John for Joao and John for John, I could not.

Answer 1

Use a function that removes accents from both the search term and the element text. The function tiraAcentos() returns the text already lowercase and without accents. Then you just put it in the argument of if:

$(document).ready(function(){
   
   function tiraAcentos(i){
      
      var i = i.toLowerCase().trim();
   
      var acentos = "ãáàâäéèêëíìîïõóòôöúùûüç";
      var sem_acentos = "aaaaaeeeeiiiiooooouuuuc";
      
      for(var x=0; x<i.length; x++){
         var str_pos = acentos.indexOf(i.substr(x,1));
         if(str_pos != -1){
            i = i.replace(acentos.charAt(str_pos),sem_acentos.charAt(str_pos));
         }
      }
      
      return i;
   }   

    $("#searchItem").on('keyup', function() {
        var conta = $("#searchItem").val();
        if(conta.length == 0) {
            $("table.table tbody tr").removeAttr('style');
        }
    });
    $('#searchItem').on('keyup', function(e){
        e.preventDefault();
        var input = document.getElementById("searchItem");
        var conta = $("#searchItem").val();
        if(conta.length >= 3) {
            var filter = input.value.toLowerCase();
            var nodes = $("table.table tbody tr");
            for (i = 0; i < nodes.length; i++) {
                if (tiraAcentos(nodes[i].innerText).includes(tiraAcentos(filter))) {
                    $(nodes[i]).show();
                } else {
                    $(nodes[i]).hide();
                }
            }
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
    <form class="form-inline" id="searchForm" onSubmit="return false;">
        <div class="form-group">
            <input type="text" id="searchItem" class="form-control" placeholder="Buscar por termos na tabela">
        </div>
    </form>
</div>

<div class="row">
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <td>#ID</td>
                <td>Prévia</td>
                <td>Titular</td>
                <td>Relatório</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>948576</td>
                <td><img class='LazyLoad' src='' data-url='./uploads/thumb/{[TRACK_IMG]}'></td>
                <td>João Nascimento Alcântara</td>
                <td><button>Gerar</button></td>
            </tr>
            <tr>
                <td>857541</td>
                <td><img class='LazyLoad' src='' data-url='./uploads/thumb/{[TRACK_IMG]}'></td>
                <td>Joao de Nascimento Alcantara</td>
                <td><button>Gerar</button></td>
            </tr>
        </tbody>
    </table>
</div>