Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

alissong

autocomplete com jquery e php

Por , em PHP

Recommended Posts

alissong    1

alissong
Postado

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:

imagem.png

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

vitorweb    2

vitorweb
Postado

Amigo, recomento você trocar de plugin, o autocomplete do jquery-ui nao funciona mt bem e nao é tao flexivel quanto o typeahead(https://github.com/bassjobsen/Bootstrap-3-Typeahead) do bootstrap. Vou te passar um exemplo:

<input type="text" name="brand" id="brand" class="form-control auto-brand" placeholder="Marca do produto"/>


$('.auto-brand').typeahead({
    name: 'brand',
    remote: '../../assets/server/system/autoCompleteBrand.php?query=%QUERY'
});

PHP:

//CREDENTIALS FOR DB
    define('DBSERVER', 'xxx');
    define('DBUSER', 'xxx');
    define('DBPASS', 'xxx');
    define('DBNAME', 'xxx');

//LET'S INITIATE CONNECT TO DB
    $connection = mysqli_connect(DBSERVER, DBUSER, DBPASS, DBNAME);

//CREATE QUERY TO DB AND PUT RECEIVED DATA INTO ASSOCIATIVE ARRAY
    if (isset($_REQUEST['query'])) {
        $query = $_REQUEST['query'];
        $sql = mysqli_query($connection, "SELECT brand FROM table WHERE brand LIKE '%" . $query . "%'");
        $array = array();
        while ($row = mysqli_fetch_array($sql)) {
            $array[] = array('label' => $row['brand'], 'value' => $row['brand']);
        }
        //RETURN JSON ARRAY
        echo json_encode($array);
    }

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito