0

Ao selecionar o produto na lista de sugestões AutoComplete tenho que dar TAB para completar os próximos campos, queria que a medida que o campo Descrição fosse preenchido os outros campos fossem preenchidos sem necessidadade do usuário utilizar TAB

<script type='text/javascript'>
    $(document).ready(function(){
            $("input[name='descri']").blur(function(){
                    var $codigo_produto = $("input[name='codigo_produto']");
                    var $barcode = $("input[name='barcode']");
                    var $id = $("input[name='id']");
 
                    $.getJSON('function.php',{ 
                            descricao: $( this ).val() 
                    },function( json ){
                            $codigo_produto.val( json.codigo_produto );
                            $barcode.val( json.barcode );
                            $id.val( json.id );
                    });
            });
    });
</script>                            
<!-- Fim do script de preenchimento automático dos campos a partir do campo Descrição -->
       <br/><br/>
    <div class="container">
       <div class="col-lg-12">
            <div class="col-lg-12">  
                 <h3 align="center">Autocomplete utilizando jQuery, PHP e MySQL</h3><br />  
                 <label>Descrição</label>  
                 <input type="text" name="descri" id="descri" class="form-control" placeholder="Escreva aqui a descrição do produto"><br>  
                 <div id="descriList"></div>  
            </div>

            <div class="col-lg-4"><!-- Inicio Input Cóodigo do Produto-->
                 <label for="ex1">Código do Produto:</label>
                 <input type="text" required class="form-control" maxlength="13" name="codigo_produto"><br>
             </div><!-- Fim Input Código do Produto -->

             <div class="col-lg-4"><!-- Inicio Input Código EAN / Barcode -->
                 <label for="ex1">Código EAN:</label>
                 <input type="text" required class="form-control" maxlength="13" name="barcode"><br>
             </div><!-- Fim Input Código EAN / Barcode -->

             <div class="col-lg-4"><!-- Inicio Input ID -->
                 <label for="ex1">ID:</label>
                 <input type="text" disabled class="form-control" maxlength="13" name="id"><br>
             </div><!-- Fim Input ID -->
       </div>
    </div>
  </body>  
 </html>
 <!-- Inicio Script para aparecer sugestões de produtos relacionados ao que esta sendo informado no input -->
 <script>  
 $(document).ready(function(){  
  $('#descri').keyup(function(){  
       var query = $(this).val();  
       if(query != '')  
       {  
            $.ajax({  
                 url:"search.php",  
                 method:"POST",  
                 data:{query:query},  
                 success:function(data)  
                 {  
                      $('#descriList').fadeIn();  
                      $('#descriList').html(data);  
                 }  
            });  
       }  
  });  
  $(document).on('click', 'li', function(){  
       $('#descri').val($(this).text());  
       $('#descriList').fadeOut().change();  
  });  
 });  
 </script>
 <!-- Fim Script para aparecer sugestões de produtos relacionados ao que esta sendo informado no input -->

2 Respostas 2

1

Em vez de usar o evento blur você pode utilizar outro evento, como o keyUp. Isso fará com que a cada letra digitada a busca seja executada (assim como está no script no final do seu código).

Uma maneira de evitar muitas chamadas assíncronas é adicionar um timeout para que a busca só seja executada após o usuário parar de digitar.

var searchTimeout = null;
$("input[name='descri']").keyup(function(){
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
        var $codigo_produto = $("input[name='codigo_produto']");
        var $barcode = $("input[name='barcode']");
        var $id = $("input[name='id']");

        $.getJSON('function.php',{ 
                descricao: $( this ).val() 
        },function( json ){
                $codigo_produto.val( json.codigo_produto );
                $barcode.val( json.barcode );
                $id.val( json.id );
        });
    }, 2000);
});
9
  • Obrigado mas já tinha tentado com KeyUp de uma forma diferente, tentei seu código e mesmo assim não foi
    – Victor
    Commented 22/10/2017 às 23:07
  • @Victor você tentou remover o código que está no final, deixando somente um keyUp para esse elemento?
    – Gabriel
    Commented 22/10/2017 às 23:16
  • se eu remover o código do final, não irá aparecer sugestões relacionadas ao auto complete pesquise sobre o que é auto complete, são sugestões relacionadas a o que foi digitado na busca, como a pesquisa do google que a medida que voce digita ele completa os elementos. Este código do final é para isso, e o do inicio é para a medida que seleciono um produto os outros campos sejam completados
    – Victor
    Commented 22/10/2017 às 23:39
  • Sim, pelo que eu vi um não influencia no outro, então deveria funcionar. Você recebe algum erro e consegue identificar se a chamada é feita com o primeiro keyUp?
    – Gabriel
    Commented 22/10/2017 às 23:41
  • Se eu deixo como evento keyUp o primeiro evento que é o que você enviou não é chamado e nem executado, já com blur ele preenche os próximos campos a partir da descricao, mas depois de selecionar um produto na lista de produtos sugeridos pelo autoComplete eu tenho de dar tab do input de name descrição para mudar o focu para outro input e ai sim completar / preencher os próximos campos . O código já funciona o problema é que queria uma melhor perfomance...
    – Victor
    Commented 22/10/2017 às 23:48
0
<script>  
$(document).ready(function(){  
     $('#funcionario').keyup(function(){  
          var query = $(this).val();  
          if(query != '')  
          {  
               $.ajax({  
                    url:"search.php",  
                    method:"POST",  
                    data:{query:query},  
                success:function(data) 
                {
                    $('#funcionarioList').fadeIn();  
                      $('#funcionarioList').html(data);  
                      $("#funcionarioList li").on('click', function(){ 
                          $('#funcionario').val($(this).text());  
                          $('#funcionarioList').fadeOut().change();
                          atualiza_campos(); 
                      });  
           }  
      });  
 }  
});  
});

    function atualiza_campos(){
                    var $codigo = $("input[name='codigo']");
                    var $cep = $("input[name='cep']");
                    var $tipo_logr = $("input[name='tipo_logr']");
                    var $nome_logr = $("input[name='nome_logr']");
                    var $nume_logr = $("input[name='nume_logr']");
                    var $comp_logr = $("input[name='comp_logr']");
                    var $bairro = $("input[name='bairro']");
                    var $cidade = $("input[name='cidade']");

                    $.getJSON('function_func.php',{ 
                            funcionario: $( '#funcionario' ).val() 
                    },function( json ){
                            $codigo.val( json.codigo );
                            $cep.val ( json.cep );
                            $tipo_logr.val ( json.tipo_logr );
                            $nome_logr.val ( json.nome_logr );
                            $nume_logr.val ( json.nume_logr );
                            $comp_logr.val ( json.comp_logr );
                            $bairro.val ( json.bairro );
                            $cidade.val ( json.cidade );

                    });
            };
 </script>  

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .