Search field value does not arrive in jquery

Question

I have a form where you have an internal search and a pagination in Jquery and PHP. The end result is this:

Paging is working correctly, but when I type the user name, the value arrives null in jquery. How can I take the value entered by jquery in the search field and implement in the code below:

Field search:

  <form class="" action="#!" method="post">
    <div class="input-group">
     <input type="text" name="Usuario" class="form-control" placeholder="Buscar por nome" id="usuario" aria-label="Buscar por nome">
     <div class="input-group-prepend">
     <button type="submit" class="input-group-text" style="cursor: pointer"><i class="fas fa-search"></i></button>
    </div>
    </div>
    </form>
    <span id="conteudo"></span>

Jquery

<script>
    var qnt_result_pg = 10;
    var pagina = 1;
    var busca = $("#usuario").val();
    $(document).ready(function () {
        listar_usuario(pagina, qnt_result_pg, busca);
    });
    function listar_usuario(pagina, qnt_result_pg, busca){
    var dados = {
            pagina: pagina,
    busca: busca,
            qnt_result_pg: qnt_result_pg
        }
        $.post('listar-pagamentos-pendentes.php', dados , function(retorna){
            $("#conteudo").html(retorna);
        });
    }
</script>

PHP (list-payment-pending.php)

$pagina = $_POST['pagina'];
$qnt_result_pg = $_POST['qnt_result_pg'];
$busca = $_POST["busca"];
echo $metodos->listarPendentes($pagina,$qnt_result_pg,$busca);

I understand that I have to take the click of the search button, but I am not able to implement in the code above without impacting the pagination. I would like to point out that the problem is not in PHP but in Jquery, because I am not able to take the value typed in the search field and play inside the page list-payout-pending.php where I make the pagination.

Answer 1

I managed to solve it as follows. It includes the PHP POST value inside Jquery. Feel free to fix:

var busca = "<?php echo $_POST["Usuario"]; ?>";