Dynamic search when writing to input

Question

I have created a pagination and search system in my project. I intend to make an improvement to my system. When I do a search, it only returns results after clicking the search button inside the form where I created the input to research.

Form:

<form class="form-inline" method="GET" action="./busca">
    <div class="form-group">
        <label for="exampleInputName2">Pesquisar</label>
        <input type="text" name="busca" class="form-control" id="exampleInputName2" placeholder="Digitar...">
    <button type="submit" class="btn btn-primary">Pesquisar</button>
    </div>
</form>

On the page of busca, I have the following code: PHP:

$pagina = (isset($_GET['pagina']))? $_GET['pagina'] : 1;
if(!isset($_GET['busca'])){
    header("Location: ./recebidas");
}else{
    $valor_pesquisar = $_GET['busca'];
}

//Selecionar todos os cursos da tabela
$result_curso = "SELECT Id, De, Assunto, Conteudo, Prioridade, DATE_FORMAT(Recebido,'%H:%i') AS Hora, DATE(Recebido) AS Data,
Email, Tipo, raddb.Alertas.Para, Status FROM raddb.Alertas LEFT OUTER JOIN raddb.ValAlertas
ON raddb.ValAlertas.IdSMS = raddb.Alertas.Id AND raddb.ValAlertas.Para = raddb.Alertas.Para
WHERE raddb.Alertas.Para = '$colaborador' AND De LIKE '%$valor_pesquisar%'";
$resultado_curso = mysqli_query($conn, $result_curso);

//Contar o total de cursos
$total_cursos = mysqli_num_rows($resultado_curso);

//Seta a quantidade de cursos por pagina
$quantidade_pg = 10;

//calcular o número de pagina necessárias para apresentar os cursos
$num_pagina = ceil($total_cursos/$quantidade_pg);

//Calcular o inicio da visualizacao
$incio = ($quantidade_pg*$pagina)-$quantidade_pg;

//Selecionar os cursos a serem apresentado na página
$result_cursos = "SELECT Id, De, Assunto, Conteudo, Prioridade, DATE_FORMAT(Recebido,'%H:%i') AS Hora, DATE(Recebido) AS Data,
Email, Tipo, raddb.Alertas.Para, Status FROM raddb.Alertas LEFT OUTER JOIN raddb.ValAlertas
ON raddb.ValAlertas.IdSMS = raddb.Alertas.Id AND raddb.ValAlertas.Para = raddb.Alertas.Para
WHERE raddb.Alertas.Para = '$colaborador' AND De like '%$valor_pesquisar%' ORDER BY Recebido Desc limit $incio, $quantidade_pg";
$resultado_cursos = mysqli_query($conn, $result_cursos);
$produto = mysqli_num_rows($resultado_cursos);

HTML:

<form class="form-inline" method="GET" action="./busca">
    <div class="form-group">
        <label for="exampleInputName2">Pesquisar</label>
        <input type="text" name="busca" class="form-control" id="exampleInputName2" placeholder="Digitar...">
    <button type="submit" class="btn btn-primary">Pesquisar</button>
    </div>
</form>
 <h1 style="font-size: 30px"><strong>Alerta Recebido</strong></h1>
    <table class="table table-responsive"> 

    <thead>
        <tr> 
            <th width="20%" style="text-align:center;">De</th>
            <th width="60%" style="text-align:center;">Assunto</th>
            <th width="10%" style="text-align:center;">Prioridade</th>
            <th width="10%" style="text-align:center;">Recebido</th>                
        </tr>
        </thead>
        <tr>
        <thead>
    <?php  

        do{

         if($nomede != $produto["De"]){
    ?>  
        <th width="10%" colspan=4>Recebido: <?php echo $produto["Data"]; ?></th>
    <?php
        $nomede = $produto["De"];
        }
   ?>
        </tr>
        </thead>
        <tbody>
        <tr>  
        <td ><?php echo $produto["De"]; ?></td>
        <td class="td-info view_data apagar" id="<?php echo $produto["Id"]; ?>,<?php echo $produto["Para"]; ?>" data-toggle="modal" href="#dataModal" width="20%" <?php echo $produto["Status"] != '0'?' style="font-weight:bold; font-size: 90%" ':' style="font-weight:normal; font-size: 90%" '?>><?php echo $produto["Assunto"]; ?></td>  
        <td><?php echo $produto["Prioridade"]; ?></td> 
        <td><?php echo $produto["Hora"]; ?></td>
        </tr>

<?php } while($produto = $resultado_cursos->fetch_assoc()); ?>
<tbody>
    </table>
<?php
                //Verificar a pagina anterior e posterior
    $pagina_anterior = $pagina - 1;
    $pagina_posterior = $pagina + 1;
?>
            <nav class="text-center">
                <ul class="pagination">
                    <li>
                        <?php
                        if($pagina_anterior != 0){ ?>
                            <a href="./busca?pagina=<?php echo $pagina_anterior; ?>&busca=<?php echo $valor_pesquisar; ?>" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        <?php }else{ ?>
                            <span aria-hidden="true">&laquo;</span>
                    <?php }  ?>
                    </li>
                    <?php 
                    //Apresentar a paginacao
                    for($i = 1; $i < $num_pagina + 1; $i++){ ?>
                        <li><a href="./busca?pagina=<?php echo $i; ?>&busca=<?php echo $valor_pesquisar; ?>"><?php echo $i; ?></a></li>
                    <?php } ?>
                    <li>
                        <?php
                        if($pagina_posterior <= $num_pagina){ ?>
                            <a href="./busca?pagina=<?php echo $pagina_posterior; ?>&busca=<?php echo $valor_pesquisar; ?>" aria-label="Previous">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        <?php }else{ ?>
                            <span aria-hidden="true">&raquo;</span>
                    <?php }  ?>
                    </li>
                </ul>
            </nav>

How can I improve my system, so when writing input start immediately searching the search page for the results and returns them with jquery?

Answer 1

So to begin I advise you to execute the query that recovers your values right at the beginning of the page and frame these in an array variable client side with your jQuery

Then you can search the value of this array with onKeyUp Event and the function $.inArray() jQuery also passing as parameters the value obtained from your search bar and the array created at the beginning