Ao selecionar o produto na lista de sugestões AutoComplete tenho que dar TAB para completar os próximos campos, queria que a medida que o campo Descrição fosse preenchido os outros campos fossem preenchidos sem necessidadade do usuário utilizar TAB. Teria como ?
<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>
$("input[name='descri']").on("input",function(){})
.$("input[name='descri']").on("change",function(){