0

Estou usando na minha busca interna o Jquery onde ao digitar a primeira letra, aparece o nome dos usuários referentes a letra digitada. Até aqui funciona corretamente, o problema é que a query que estou usando, ela faz busca em uma outra tabela da chave estrangeira e foi incluído também um Count. Algo mais ou menos dessa forma:

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

Só que estou sentindo uma certa lentidão para aparecer os nomes e gostaria de colocar um loading e o botão para buscar aparecesse só depois da query executada. O código que tenho é esse:

<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>

1 Resposta 1

0

Consegui resolver dessa forma:

<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>

Você deve fazer log-in para responder a esta pergunta.