Complete fields

Navigation
0

When selecting the product in the list of suggestions AutoComplete I have to give TAB to complete the next fields, I wanted as long as the Description field was filled in the other fields were filled without needing the user to use TAB. Would you like? 

    <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>
    
asked by anonymous 23.10.2017 / 13:53

2 answers

1

The ideal is to do a normal function to get the click in the autocomplete% . I also changed the position of the listener <li> into the return of the first Ajax, so that the $("#descriList li").on is delegated to the click dynamic, and consequently call the function that fills the other fields. / p>

The code looks like this: 

$(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 );
        });
}
    
23.10.2017 / 18:30
0

You can change the event blur to keyup : 

 $("input[name='descri']").keyup(function(){})
    
23.10.2017 / 14:30
How to change the generated executable icon of an E4 RCP product? How to assign value to input field after selecting item in Select [closed]