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