Skip to main content
1 de 8
Victor
  • 1,6mil
  • 11
  • 26

Completar campos sem usuario ter que dar TAB

Criei um auto complete para ajudar o usuário, onde a lista de produtos aparece de acordo com a descrição informada no campo input com name=descrição, até ai tudo bem consegui fazer, mas ao selecionar o produto tenho que dar TAB para completar os próximos campos, teria como alguém me ajudar a melhorar meu código para que a medida que fosse selecionada a descrição do produto não fosse necessário dar TAB para preencher os próximos campos

<!-- Início do script de preenchimento automático dos campos a partir do campo Descrição -->
<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']");
                        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']");
                        
                        $.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 );
                        });
                });
        });
</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>Entre com o produto</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 class="col-lg-3"><!-- Inicio Select Unidade Principal -->
                     <div class="form-group">
                     <label>Unidade Principal:</label>
                         <select required class="form-control" name="unid">
                             <option></option>
                             <?php
                                 $result = "SELECT * FROM cadunid ORDER BY descricao";
                                 $resultado = mysqli_query($conn, $result);
                                 while($row = mysqli_fetch_assoc($resultado)) {
                                     echo '<option value="'.$row['codigo'].'">'.$row['descricao'].'</option>';
                                 }
                             ?>
                         </select>
                     </div>
                 </div><!-- Fim Select Unidade Principal-->

                 <div class="col-lg-2"><!-- Inicio Select Família -->
                     <div class="form-group">
                     <label>Familia:</label>
                         <select required class="form-control" name="familia">
                             <option></option>
                             <option value="90">Diversos</option>
                             <option value="40">Embalado</option>
                             <option value="80">Embalagem</option>
                             <option value="60">Folhagem</option>
                             <option value="20">Fruta</option>
                             <option value="21">Frutas Secas</option>
                             <option value="10">Legume</option>
                             <option value="30">Magalusi</option>
                             <option value="70">Orgânico</option>
                             <option value="50">Ovos</option>
                         </select>
                     </div>
                 </div><!-- Fim Select Família-->

                 <div class="col-lg-2"><!-- Inicio Select Tipo-->
                     <div class="form-group">
                     <label>Tipo:</label>
                         <select required class="form-control" name="tipo">
                             <option></option>
                             <option value="0">Normal</option>
                             <option value="1">Grade</option>
                             <option value="2">Kit</option>
                         </select>
                     </div>
                 </div><!-- Fim Select Tipo -->

                 <div class="col-lg-3"><!-- Inicio Select Departamento -->
                     <div class="form-group">
                     <label>Departamento:</label>
                         <select required class="form-control" name="id_depto">
                         <option></option>
                             <?php
                                 $result = "SELECT * FROM tbdepto ORDER BY descricao";
                                 $resultado = mysqli_query($conn, $result);
                                 while($row = mysqli_fetch_assoc($resultado)) {
                                     echo '<option value="'.$row['id'].'">'.$row['descricao'].'</option>';
                                 }
                             ?>
                         </select>
                     </div>
                 </div><!-- Fim Select Departamento -->

                 <div class="col-lg-2"><!-- Inicio Select Grupo -->
                     <div class="form-group">
                     <label>Grupo:</label>
                         <select required class="form-control" name="grupo">
                             <option></option>
                              <?php
                                  $result = "SELECT id, descricao from TBATRIBUTOS where cod_pai in (select cod_referencial from TBATRIBUTOS where descricao = 'Grupos')";
                                  $resultado = mysqli_query($conn, $result);
                                  while($row = mysqli_fetch_assoc($resultado) ) {
                                      echo '<option value="'.$row['id'].'">'.$row['descricao'].'</option>';
                                  }
                              ?>
                         </select>
                     </div>
                 </div><!-- Fim Select Grupo -->
           </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 --> 

Victor
  • 1,6mil
  • 11
  • 26