Como criar um Auto Completar

A função auto completar é muito interessante para se aplicar em muitos lugares, por exemplo, se criamos um site onde vamos fazer o cadastro de clientes, e precisamos do estado (exemplo São Paulo) ter de digitar o nome completo pode ser muito trabalhoso, então criamos a função auto completar onde o usuário, digita apenas algumas letras do nome, e as “opções” que tiverem as primeiras letras digitadas são selecionadas em nosso banco de dados, isso pode ser usado com varias finalidades não só nomes, podemos usar este tipo de função para checar, por exemplo cadastros de clientes, de produtos etc, esta ferramenta junta com outras como por exemplo, o tutorial de Ajax e jQuery, imagine um sistema por exemplo de uma locadora, onde você “vai digitando” e os nomes dos clientes que tenham essas letras aparecem na tela, você então seleciona o nome do cliente que quer e o sistema preenche todas as informações dele para por exemplo fazer a locação de um filme, de modo que você saberá exatamente com qual cliente você esta trabalhando.

Para fazer o auto completar, vamos precisa copiar dois arquivos javascript dentro de uma pasta chamada “js”.

Arquivo 1 (Lembrando de manter os mesmo nomes dos arquivos)
Arquivo 2 (Lembrando de manter os mesmo nomes dos arquivos)

Depois de ter copiado dos arquivos vamos coloca-los em uma pasta chamada js, criada a pasta e colocada os dentro precisamos então criar dois arquivos um onde vamos digitar o que estamos procurando, e outra página que é quem terá o script para que se faça a busca no banco de dados.

Primeiramente vamos criar o arquivo index.html que será responsável por captar as informações que serão buscadas
O código de nossa página principal é o seguinte:

<script type="text/javascript" src="js/autocomplete.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/autocomplete.css">
<script type="text/javascript">
$(document).ready(function(){
 
    new Autocomplete("campo_estado", function() {
        this.setValue = function( id, estado, sigla ) {
            $("#id_val").val(id);
            $("#estado_val").val(estado);
            $("#sigla_val").val(sigla);
        }
        if ( this.isModified )
            this.setValue("");
        if ( this.value.length < 1 &#038;& this.isNotClick ) 
            return ;
        return "ajax.php?q=" + this.value;
    });
 
});
</script>
 
 
<h1>Tutorial de auto complete em Ajax</h1>
Insira um estado:
<input type="text" name="campo_estado" id="campo_estado">

Esta página, pega o que for digitado no campo input, e manda os dados para o php que vai fazer uma consulta letra a letra.

Em seguida crie o a página php com o nome de ajax.php este é código que vai fazer a busca nos servidores, lembre-se de mudar o nome o usuário de banco de dados, senha e suas tabelas.

<?php
  
$hostname = 'localhost';
$username = 'seu usuario';
$password = 'sua senha';
$dbname = 'seu banco de dados';
 
mysql_connect( $hostname, $username, $password ) or die ( 'Erro ao tentar conectar ao banco de dados.' );
mysql_select_db( $dbname );
 
$q = mysql_real_escape_string( $_GET['q'] );
 
$sql = "SELECT * FROM estados where locate('$q',estado) --> 0 order by locate('$q',estado) limit 10";
 
$res = mysql_query( $sql );
 
while( $campo = mysql_fetch_array( $res ) ) {
    $id = $campo['id'];
    $estado = $campo['estado'];
    $sigla = $campo['sigla'];
    $estado = addslashes($estado);
    $html = preg_replace("/(" . $q . ")/i", "<span style="\"font-weight:bold\"">\$1</span>", $estado);
    echo "<li onselect="\"this.setText('$estado').setValue('$id','$estado','$sigla');\"">$html ($sigla)</li>\n";
}
?>

De modo simplificado o esquema de como funcionam os dois programas ( este e o tutorial anterior tutorial Ajax e jQuery).

Imagine um sistema de locação de veículos onde, tem vários clientes cadastrados no banco de dados, então o operador do computador começa a digitar o R.G. de um cliente no sistema, o sistema faz uma varredura no banco de dados, selecionando o cliente que tenha este R.G. completo. Então através do sistema de Ajax e jQuery que apresentamos no tutorial anterior completa todos os demais campos com as informações dos clientes, de modo que o operador tem um redução no tempo de busca do cliente, pois não necessita preencher todos os campos com informações de clientes.

Confira o exemplo funcionando.