A loading appears while names are not listed in the Jquery autocomplete search

Question

I am using in my internal search Jquery where when typing the first letter, appears the name of the users referring to typed letter. So far it works correctly, the problem is that the query I’m using, it searches another foreign key table and a Count has also been included. Something more or less like this:

SELECT *, COUNT(COMP.IdCompras) AS QTDComprasEfetuadas FROM usuario USU INNER JOIN compras COMP ON USU.IdUsuario = COMP.IdUsuario;

Only that I am feeling a certain slowness to appear the names and I would like to place a loading and the search button appeared only after the query executed. The code I have is this:

<div class="input-group">
      <input type="text" name="Nome" class="form-control col-md-8" placeholder="Digite o nome do usuário" id="usuario" aria-label="Buscar por nome" aria-describedby="btnGroupAddon2">
       <div class="input-group-prepend">
         <button type="submit" class="input-group-text" id="btnBuscar" style="cursor: pointer"><i class="fas fa-search"></i></button>
       </div>
    </div>

    <script>
    $(function () {
        $("#usuario").autocomplete({
            source: 'processar-busca.php'
        });
    });
    </script>

Answer 1

I managed to solve it that way:

<script>
     $(document).ready(function() {
       $( "#usuario" ).autocomplete({
           source: function(request, response){
           $('#loading_data_icon').html('<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>');    // showing loading icon
           $.ajax({
              url: 'processar-busca.php',
              dataType: "json",
              data: {
                    'term' : request.term,
                    'empSearch' : 1
                    },
                    success: function(data) {
                        response(data);
                        $('#loading_data_icon').html('');
                    }
                });
            }
       });
     });
     </script>