Complete fields without user having to give TAB

Question

When selecting the product in the list of suggestions Autocomplete I have to give TAB to complete the next fields, I wanted that as the Description field was filled in the other fields were filled out without having 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 -->

Answer 1

Instead of using the event Blur you can use another event, such as keyUp. This will cause each typed letter to run the search (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 is only executed 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);
});

Answer 2

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