Complete fields

Asked

Viewed 178 times

0

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. Would have as ?

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

php javascript ajax json

  • If you want the function to be executed each time something is typed in the field, just use $("input[name='descri']").on("input",function(){}).

  • wanted the function to be executed by clicking on something suggested by the autocomplete list and filling in the name input field

  • Puts $("input[name='descri']").on("change",function(){

  • tried and it doesn’t work, should I change the second script

  • Here it worked, see a test: http://decknorte.com/teste.php

  • type anything in the "description" field and then click on any <li> that will appear

  • in case the autocomplete works, the search related data appears in the 'description' field but when selecting something / click on something, instead of completing the fields as soon as the description field is filled, How to give TAB for the execution of the second function and then complete the next fields

  • No no. See Alert, you have already entered the function that will complete the other fields.

  • You need to give TAB no. By clicking on the <li> it fills the "description" field and calls the function to the other fields.

  • I changed the code there to fill in the fields. Note that it works perfectly by clicking on a <li>: http://decknorte.com/teste.php

  • in the case in my code it does not work, only recognizes what was typed in the input field, I edited the question to show how this

  • Let’s go continue this discussion in chat.

Show 7 more comments

2 answers

1


The ideal is to make a normal function to receive the click in <li> of autocomplete. I also changed the position of Listener $("#descriList li").on within the return of the first Ajax, to be delegated the click in <li> dynamics, and consequently call the function that fills the other fields.

The code went 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 );
        });
}

  • thank you settled justly as needed

0

You can change the event blur for keyup:

 $("input[name='descri']").keyup(function(){})

  • In this case I’ve tried it, but I don’t know if having a function below with this event conflicts, but it doesn’t work. I wanted that when receiving the click on the autocomplete suggestion, the fields were already filled in,

  • if Voce succeeds with these two events without conflicting it would have to change the code and show where the errors are ?

  • This does not provide an answer to the question. To criticize or request clarification from an author, leave a comment below its publication. - Of Revision

  • 1

    @DVD you could help in the solution

  • Why Voce is using two events ready @Victor? Maybe you can link both actions into one keyup..

  • @Lucascosta I tried and could not, I edited my code and I will reset, you could help me?

  • Sure @Victor. I invite you to chat on chat

Show 2 more comments

Browser other questions tagged php javascript ajax json

You are not signed in. Login or sign up in order to post.