autocomplete com jquery e php
Pessoal,
Estou tentando fazer um código autocomplete com jquery e php, mas esta exibindo variável indefinida. Vejam os códigos abaixo:
1 - Autocomplete.php
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<title> Artigo AutoComplete</title>
<link rel="stylesheet" href="java/jquery-ui-1.12.1/jquery-ui.css">
<script src="java/jquery-3.1.1.min.js"></script>
<script src="java/jquery-ui-1.12.1/jquery-ui.js"></script>
<script>
$(function() {
// Atribui evento e função para limpeza dos campos
$('#busca').on('input', limpaCampos);
// Dispara o Autocomplete a partir do segundo caracter
$("#busca").autocomplete({
minLength: 2,
source: function( request, response ) {
$.ajax({
url: "procura.php",
dataType: "json",
data: {
acao: 'autocomplete',
parametro: $('#busca').val()
},
success: function(data) {
response(data);
}
});
},
focus: function( event, ui ) {
$("#busca").val( ui.item.descricao );
carregarDados();
return false;
},
select: function( event, ui ) {
$("#busca").val( ui.item.descricao );
return false;
}
})
.autocomplete("instance")._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a><b>Codigo: </b>" + item.cod_produto + " - <b>Descricao: </b>" + item.descricao + "</a>" )
.appendTo( ul );
};
// Função para carregar os dados da consulta nos respectivos campos
function carregarDados(){
var busca = $('#busca').val();
if(busca != "" && busca.length >= 2){
$.ajax({
url: "procura.php",
dataType: "json",
data: {
acao: 'procura',
parametro: $('#busca').val()
},
success: function(data) {
$('#cod_produto').val(data[0].cod_produto);
$('#descricao').val(data[0].descricao);
}
});
}
}
// Função para limpar os campos caso a busca esteja vazia
function limpaCampos(){
var busca = $('#busca').val();
if(busca == ""){
$('#cod_produto').val('');
$('#descricao').val('')
}
}
});
</script>
</head>
<body>
<br>
<div class="row">
<div class="form-group col-md-6 col-md-offset-3">
<input type="text" class="form-control" id="busca" placeholder="Informe o Titulo do Livro">
</div>
</div>
<header class="row">
<h2 class='text-center text-danger'>Detalhes do Livro</h2>
</header>
<br>
<div class="row">
<form>
<div class="form-group col-md-3">
<label for="titulo">Codigo de Barra</label>
<input type="text" class="form-control" id="cod_produto">
</div>
<div class="form-group col-md-6">
<label for="titulo">Descricao</label>
<input type="text" class="form-control" id="descricao">
</div>
</form>
</div>
</body>
</html>2 - procura.php
<?php
Função para conectar o banco de dados
include_once("conexao/bdinc.php");
Fim da conexão
// Recebe os parâmetros enviados via GET
$acao = (isset($_GET['acao'])) ? $_GET['acao'] : null;
$parametro = (isset($_GET['parametro'])) ? $_GET['parametro'] : null;// Verifica se foi solicitado uma consulta para o autocomplete
if($acao == 'autocomplete'):
$sql = "SELECT * FROM produto WHERE (cod_produto LIKE '$parametro' OR descricao LIKE '$parametro%') ORDER BY descricao LIMIT 20 ";
$res = mysqli_query($con,$sql);
while($linha = mysqli_fetch_assoc($res)){
$dados[] = $linha['cod_produto'];
$dados[] = $linha['descricao'];
}
$json = json_encode($dados);
echo $json;
endif;// Verifica se foi solicitado uma consulta para preencher os campos do formulário
if($acao == 'procura'):
$sql = "SELECT * FROM produto WHERE cod_produto = '$parametro'";
$res = mysqli_query($con,$sql);
while($linha = mysqli_fetch_assoc($res)){
$dados[] = $linha['cod_produto'];
$dados[] = $linha['descricao'];
}
$json = json_encode($dados);
echo $json;
endif;
?>Agora veja como esta exibindo os dados:
Parece que as variáveis não definidas são essas:
.append( "<a><b>Codigo: </b>" + item.cod_produto + " - <b>Descricao: </b>" + item.descricao + "</a>" )
Exibe assim:
Codigo: undefined - Descricao: undefined
Alguém pode ajudar a descobri como corrigir esse erro?
Discussão (1)
Carregando comentários...