Complete fields without user having to give TAB

Question

Complete fields without user having to give TAB

Navigation

#1 by (1 votes)
#2 by (0 votes)

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

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

php javascript jquery ajax json

asked by anonymous 22.10.2017 / 21:29

2 answers

1

Instead of using the blur event you can use another event, such as keyUp . This will cause each letter you type to execute (just as it is in the script at the end of your code).

One way to avoid many asynchronous calls is to add a timeout so that the search will only be performed after the user stops typing.

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);
});

23.10.2017 / 00:32

How to insert value in mysql with PHP and Ajax How to set up a Laravel project with VueJs

score 0 · Accepted Answer

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