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. Teria como ?

    <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>
 <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();  
  });  
 });  
 
$("input[name='descri']").on("change",function(){
	alert("Campo alterado!");
        var $codigo_produto = $("input[name='codigo_produto']");
        var $barcode = $("input[name='barcode']");
        var $id = $("input[name='id']");
        var $unid = $("select[name='unid']");
        var $familia = $("select[name='familia']");
        var $tipo = $("select[name='tipo']");
        var $id_depto = $("select[name='id_depto']");
        var $grupo = $("select[name='grupo']");
        var $cod_referencial = $("input[name='cod_referencial']");
        var $codigo_interno = $("input[name='codigo_interno']");

        $.getJSON('function.php',{ 
                descricao: $( this ).val() 
        },function( json ){
                $codigo_produto.val( json.codigo_produto );
                $barcode.val( json.barcode );
                $id.val( json.id );
                $unid.val( json.unid );
                $familia.val( json.familia );
                $tipo.val ( json.tipo );
                $id_depto.val( json.id_depto );
                $grupo.val( json.grupo );
                $cod_referencial.val( json.cod_referencial );
                $codigo_interno.val( json.codigo_interno );
        });
});
 </script> 

12
  • Se quiser que a função seja executada cada vez que algo é digitado no campo, basta usar $("input[name='descri']").on("input",function(){}).
    – Sam
    Commented 23/10/2017 às 14:03
  • queria que a função fosse executada ao clicar em algo sugerido pela lista do autoComplete e preenchesse o campo input de name descrição
    – Victor
    Commented 23/10/2017 às 15:19
  • Coloca $("input[name='descri']").on("change",function(){
    – Sam
    Commented 23/10/2017 às 15:36
  • ja tentei e não funciona, sera que devo alterar o segundo script
    – Victor
    Commented 23/10/2017 às 15:38
  • Aqui funcionou, veja um teste: decknorte.com/teste.php
    – Sam
    Commented 23/10/2017 às 15:39

2 Respostas 2

1

O ideal é fazer uma função normal para receber o click na <li> do autocomplete. Mudei também a posição da listener $("#descriList li").on para dentro do retorno do primeiro Ajax, para que seja delegado o click nas <li> dinâmicas, e consequentemente chamar a função que preenche os demais campos.

O código ficou assim:

$(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);  
                        $("#descriList li").on('click', function(){ 
                            $('#descri').val($(this).text());  
                           $('#descriList').fadeOut().change();
                           atualiza_campos(); 
                    });  
                 }  
            });  
       }  
  });  
 });

function atualiza_campos(){
        var $codigo_produto = $("input[name='codigo_produto']");
        var $barcode = $("input[name='barcode']");
        var $id = $("input[name='id']");
        var $unid = $("select[name='unid']");
        var $familia = $("select[name='familia']");
        var $tipo = $("select[name='tipo']");
        var $id_depto = $("select[name='id_depto']");
        var $grupo = $("select[name='grupo']");
        var $cod_referencial = $("input[name='cod_referencial']");
        var $codigo_interno = $("input[name='codigo_interno']");

        $.getJSON('function.php',{ 
                descricao: $( '#descri' ).val() 
        },function( json ){
                $codigo_produto.val( json.codigo_produto );
                $barcode.val( json.barcode );
                $id.val( json.id );
                $unid.val( json.unid );
                $familia.val( json.familia );
                $tipo.val ( json.tipo );
                $id_depto.val( json.id_depto );
                $grupo.val( json.grupo );
                $cod_referencial.val( json.cod_referencial );
                $codigo_interno.val( json.codigo_interno );
        });
}
1
  • obrigado resolveu jusamente como precisava
    – Victor
    Commented 23/10/2017 às 16:31
0

Voce pode alterar o evento blur para keyup:

 $("input[name='descri']").keyup(function(){})
7
  • No caso ja tentei isso, porém não sei se por já ter uma função embaixo com este evento entra em conflito, mas não funciona. Queria que ao receber o click na sugestão do autoComplete, já fossem preenchidos os campos,
    – Victor
    Commented 23/10/2017 às 12:37
  • se voce consegue com estes dois eventos sem conflitar teria como alterar o código e mostrar onde estão os erros ?
    – Victor
    Commented 23/10/2017 às 12:52
  • Isto não fornece uma resposta à pergunta. Para criticar ou solicitar esclarecimento de um autor, deixe um comentário abaixo da publicação dele. - Da Revisão
    – Sam
    Commented 23/10/2017 às 12:56
  • 1
    @DvD você conseguiria ajudar na solução
    – Victor
    Commented 23/10/2017 às 13:11
  • Por que voce esta usando dois eventos ready @Victor? Talvez possa vincular ambas as acoes em somente um keyup..
    – BrTkCa
    Commented 23/10/2017 às 13:22

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 .