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

Question

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

Navigation

#1 by (0 votes)

0

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

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

But I'm feeling a bit slow to get the names and I would like to put a loading and the search button to appear 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>

jquery

asked by anonymous 30.12.2018 / 21:44

1 answer

Http / 2 in browsers with http / 1.x Problems with XML request with AJAX

score 0 · Answer 1

I was able to resolve this:

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