How to do an autocomplete with ajax?

3

I'm trying to implement an autocomplete with ajax, where I search the database and show the options in the input, but I can not identify where I am wrong.

Follow the code:

  <div class="row troca">
                    <div class="small-6 large-9 columns">
                        <label for="nome">Nome:</label>
                        <input id="nome" name="nome" class="nome" type="text" />
                    </div>
                </div>  

autocomplete.js

$(document).ready(function(){

    var MIN_LENGTH = 2;

    $('.nome').keyup(function(){

     var nome = $('.nome').val();

        if (nome.length >= MIN_LENGTH) {    

            $.ajax({
            type:'POST',
            url:'./modulos/troca/busca.php',

            dataType: "json",

            success: function(msg){
            var availableTags = msg;

                    $(".nome").autocomplete({
                    source: availableTags

                    });
            }

            });
        }
    });

connect.class.php

class conexao{
    private $ora_servidor;      // Servidor Oracle
    private $ora_user;           // Usuario do banco
    private $ora_senha;        // Senha do banco
    private $ora_conecta;      //identificador de conexão
    public  $resultado;

    //Variaveis do método Select
    public $Select;
    public $erroSelect;

    //Variaveis do método deletar
    public $Delete;
    public $ConfirmaDelete;
    public $erroDelete;

    //Variaveis do método Inserir
    public $Insert;
    public $ConfirmaInsert;
    public $erroInsert;

    //Variaveis do método Update
    public $Update;
    public $ConfirmaUpdate;
    public $erroUpdate;

//Construtor
    function __construct()
    {
        //Define os dados de conexão ao banco de dados
        $this->ora_servidor = '(DESCRIPTION =
                    (ADDRESS_LIST =
                        (ADDRESS = (PROTOCOL = TCP)(HOST = 192.168.0.4)(PORT = 1521))
                     )
                    (CONNECT_DATA =
                        (SID = consinco)
                    )
                    ) ';
        $this->ora_user  = "consinco";
        $this->ora_senha = "C5_4417";
    }

    //Conecta ao Bando de Dados
    public function Conectar()
    {
        $this->ora_conecta = oci_connect($this->ora_user,$this->ora_senha,$this->ora_servidor);
        if(!$this->ora_conecta) {
            echo "<p>Não foi possível conectar-se ao servidor Oracle.</p>\n"
                 .
                 "<p><strong>Erro Oracle: " . oci_error() . "</strong></p>\n";
                 exit();
        }
    }

    //Selecionar dados
    public function Select()
    {
        try
        {
            //OCIParse análisa a ”consulta” (identificador de conexão, meuSQL)
            $this->resultado = oci_parse($this->ora_conecta, $this->Select);
            if(oci_execute($this->resultado))
            {
                return $this->resultado;
            }
            else
            {
                $e= oci_error($this->resultado);
                $this->erroSelect = ("ERRO : " . $e['message']. "\nTIPO: Select\nINSTRUCAO : ".$this->Select);
               // throw new Exception($erro_select); //Msg de Erro
            }
        }
        catch (Exception $excecao)
        {
            //Exibe a msg de erro
            echo $excecao->getMessage();
        }
    }

    //Deletar dados
    public function Deletar()
    {
        //Tenta Deletar, senão exibe msg de erro personalizada
        try
        {
            $this->resultado = oci_parse($this->ora_conecta, $this->Delete);
            if(oci_execute($this->resultado))
            {
                return $this->resultado;
            }
            else
            {
                //$this->ErroDelete = ("<p>Erro Oracle: " . OCIError() . "</p>");
                throw new Exception($this->ErroDelete); //Msg de Erro
            }
        }
        catch (Exception $excecao)
        {
            echo $excecao->getMessage();
        }
    }

    //Inserir dados
    public function Inserir()
    {

        //Tenta Inserir, senão exibe msg de erro personalizada
        try
        {
            $this->Insert;
            $this->ora_conecta;
            $this->resultado = oci_parse($this->ora_conecta, $this->Insert);
            if(oci_execute($this->resultado))
            {
                return $this->resultado;
            }
            else
            {
                $e= oci_error($this->resultado);
                $this->erroInsert = ("ERRO : " . $e['message']. "\nTIPO: Insert\nINSTRUCAO : ".$this->Insert);
                //throw new Exception($this->ErroInsert); //Msg de Erro
            }
        }
        catch (Exception $excecao)
        {
            echo $excecao->getMessage();
        }
    }

    //Atualziar dados
    public function Update()
    {
       //Tenta Inserir, senão exibe msg de erro personalizada
        try
        {
            $this->resultado = oci_parse($this->ora_conecta, $this->Update);
            if(oci_execute($this->resultado))
            {
                return $this->resultado;
            }
            else
            {
                $e= oci_error($this->resultado);
                $this->erroUpdate = ("ERRO : " . $e['message']. "\nTIPO: Update\nINSTRUCAO : ".$this->Update);
/*                $this->ErroUpdate = ("<p>Erro Oracle: " . OCIError() . "</p>");
                throw new Exception($this->ErroUpdate); //Msg de Erro*/
            }
        }
        catch (Exception $excecao)
        {
            echo $excecao->getMessage();
        }
    }

    //Desconecta do banco de dados
    public function Desconectar()
    {
        return oci_close($this->ora_conecta);
    }
}

search.php

<?php       

                    include("../../include/class/conecta.class.php");
                    include("../../include/function/funcoes.php");
                    include("../../include/function/variaveis.php");


                    $nome = $_POST['nome'];

                    if (!$nome) return;

                    $conn = new conexao;
                    $conn->Conectar();

                    $conn->Select = "SELECT DISTINCT nome FROM boa_clienteentrega WHERE nome LIKE '%$nome%'";

                    $conn->select();

                    while( $row = oci_fetch_array($conn->resultado)){
                        $result[] = array( 
                        'nome' => $row['NOME'];
                     );
                    }

                $conn->desconectar();

                    //$data = array("teste" , "teste1", "teste2", "teste3");
                    echo json_encode($result);
            ?>
    
asked by anonymous 13.04.2015 / 20:06

1 answer

1

correction in the script of a read in the comment

$(document).ready(function(){

var MIN_LENGTH = 2;

$('.nome').keyup(function(){

 var nome = $('.nome').val();

    if (nome.length >= MIN_LENGTH) {    

        $.ajax({
        type:'POST',
        url:'./modulos/troca/busca.php',

        dataType: "json",

        success: function(msg){
        var availableTags = msg;

        $(".nome").autocomplete({
            source: availableTags, // source é a origem dos dados ok
            select: function( event, ui ) {   // PARAMETRO SELECT                                
            $( "#cid_nome" ).val( ui.item.obj.cid_nome );   // PREENCHE RETORNO DA CONSULTA
            $( "#cid_cod_nome" ).val(ui.item.obj.cid_id);   // PREENCHE RETORNO DA CONSULTA            
        } 

                });
        }

        });
    }
});

follow an ai link to sample link

    
17.04.2015 / 19:26