quicksearch dissapear after 2/3 letters - php

Question

i have that table and a div with a quicksearch and after i write 2 or 3 letters he show results, but then the div search dissapear after show the results and if i want to write something new, i have to refresh the page
thats the div
<table id="tabela" class="table admin">
<tr class="outro">
<th width="15%">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.3.1/jquery.quicksearch.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
<input name="consulta" id="txt_consulta" placeholder="Procurar..." type="text" class="form-control">
</div>
</th>
<th width="10%"></th>
<th width="30%"></th>
<th width="15%">
<img src="../assets/img/add.PNG" class="icone" />Adicionar utilizador
</a>
</th>
</tr>
<tr class="tabela">
<th width="10%">
<p>Nome</p>
</th>
<th width="5%"></th>
<th width="30%">
<p>Permissões</p>
</th>
<th width="10%"></th>
</tr>
<?php
foreach ($utilizadores as $key => $value) {
echo '<tr><td>' . '<p class="texto">' . $value->nome . '</p>' . '</td>';
echo '<td>' . '<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">' . '<p>Info</p>' . '</button></td>';
echo '<td>';
if ($value->tipo_user == "1") {
echo '<p class="texto">' . "Administrador" . '</p>';
} else if ($value->tipo_user == "2") {
echo '<p class="texto">' . "Gestor" . '</p>';
} else {
echo '<p class="texto">' . "Utilizador" . '</p>';
}
'</td>';
echo '<td>Eliminar</p></td></tr>';
}
?>
</table>
and thats the script
<script>
$('input#txt_consulta').quicksearch('table#tabela tbody tr');
</script>
what am i doing wrong?

Answer 1

It's because your quicksearch filters all rows of your table. You can solve that by giving your dynamically added rows a class and set quicksearch upon that class.
echo '<tr class="filter_row"><td>' . '<p class="texto">' . $value->nome . '</p>' . '</td>';
and then you have to add that to the configuration script:
<script>
$('input#txt_consulta').quicksearch('table#tabela tbody tr.filter_row');
</script>