JQuery autocomplete em ajax com php e mysql
Olá!
Pessoal, desenvolvi um novo sistema de auto complete, na forma de um plugin JQuery, o Simple AutoComplete JQuery Plugin.
O Simple AutoComplete JQuery Plugin é mais fácil de integrar e resolve os BUGs que aconteciam no IE, na funcionalidade deste tutorial.
Você pode baixá-lo e ver a documentação em : http://blog.idealmind.com.br/projetos/simple-autocomplete-jquery-plugin/
Neste tutorial vou mostrar para você como fazer um autocomplete usando JQuery e AJAX, estilizado com css, e consultando banco de dados MySQL com PHP.
O resultado final será como a imagem abaixo:
Antes de tudo, baixe os arquivo necessários: http://blog.idealmind.com.br/exemplos/autocomplete/autocomplete.rar
Lá você encontra os arquivos javascript e css, e também o php, uma página de exemplo e as sqls.
Bom, depois de baixado, vamos ao primeiro passo, que será criar uma tabela no banco de dados, e inserir alguns dados.
Quero deixar um agradecimento e os créditos para o pessoal do webartz (http://www.webartz.com.br/mysql/banco-mysql-de-cidades-e-estados-do-brasil/), pois foi onde encontrei e baixei as sqls com os dados das cidades e estados do brasil.
Vamos criar uma tabela para o nosso exemplo, com os estados do Brasil:
CREATE TABLE `estados` ( `id` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, `sigla` VARCHAR(2) NOT NULL, `estado` VARCHAR(45) NOT NULL, PRIMARY KEY (`id`), INDEX `ix_estado`(`estado`) ) ENGINE = MyISAM CHARACTER SET utf8 COLLATE utf8_general_ci;
E agora vamos inserir os estados na tabela:
INSERT INTO `estados` (id, sigla, estado ) VALUES (1, 'AC', 'Acre'), (2, 'AL', 'Alagoas'), (3, 'AM', 'Amazonas'), (4, 'AP', 'Amapá'), (5, 'BA', 'Bahia'), (6, 'CE', 'Ceará'), (7, 'DF', 'Distrito Federal'), (8, 'ES', 'Espírito Santo'), (9, 'GO', 'Goiás'), (10, 'MA', 'Maranhão'), (11, 'MG', 'Minas Gerais'), (12, 'MS', 'Mato Grosso do Sul'), (13, 'MT', 'Mato Grosso'), (14, 'PA', 'Pará'), (15, 'PB', 'Paraíba'), (16, 'PE', 'Pernambuco'), (17, 'PI', 'Piauí'), (18, 'PR', 'Paraná'), (19, 'RJ', 'Rio de Janeiro'), (20, 'RN', 'Rio Grande do Norte'), (21, 'RO', 'Rondônia'), (22, 'RR', 'Roraima'), (23, 'RS', 'Rio Grande do Sul'), (24, 'SC', 'Santa Catarina'), (25, 'SE', 'Sergipe'), (26, 'SP', 'São Paulo'), (27, 'TO', 'Tocantins') ;
Agora vamos criar um arquivo HTML vazio:
<html> <head> </head> <body> </body> </html>
Agora, dentro da tag <head> vamos incluir os arquivos necessários:
<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">
Quero deixar claro que o arquivo autocomplete.js deve ser chamado antes da JQuery, por questões de compatibilidade.
Feito isso, vamos criar, dentro da tag <body> o campo input onde será digitado o texto e aparecerá o autocomplete:
<input type="text" name="campo_estado" id="campo_estado" />
Observe os valores dos atributos name e id: campo_estado. Estes valores serão a referência para a JQuery.
E agora vamos criar 3 campos, anda dentro da tag <body>, onde armazenaremos os dados referentes a opção que for selecionada no autocomplete:
<input type="text" id="id_val" name="id" value="" /><br /> <input type="text" id="estado_val" name="estado" value="" /><br /> <input type="text" id="sigla_val" name="sigla" value="" />
Observe que foi criado um campo para cada resultado da consulta que o autocomplete vai fazer via AJAX, PHP e MySQL.
Ok. Agora vamos para a parte do javascript, que fará tudo funcionar. O seguinte código deve ser inserido entre as tags <head></head>, depois da chamada dos arquivos js e css que foram incluídos.
<script type="text/javascript">
$(document).ready(function(){
// Aqui que tudo começa. Observe que usei o atributo name do campo que será digitado o texto como referência.
new Autocomplete("campo_estado", function() {
// Quando o autocomplete trazer o resultado da consulta, vai atribuir nos campos correspondentes
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 && this.isNotClick )
return ;
// O arquivo php abaixo é que será chamado via AJAX, sendo passado o parâmetro q com o valor digitado no campo
return "ajax.php?q=" + this.value;
});
});
</script>
Agora vamos criar o arquivo ajax.php, que receberá por GET o parâmetro q com o valor do texto que foi digitado no campo:
<?php
// Abaixo são definidas as variáveis de acesso ao banco de dados MySQL
$hostname = 'localhost';
$username = 'root';
$password = '';
$dbname = 'test';
// Abaixo o código de conexão ao banco
mysql_connect( $hostname, $username, $password ) or die ( 'Erro ao tentar conectar ao banco de dados.' );
mysql_select_db( $dbname );
// Na linha abaixo é dado um escape, para retirar caracteres que possam prejudicar a consulta sql
$q = mysql_real_escape_string( $_GET['q'] );
// Abaixo a sql que retornará os dados
$sql = "SELECT * FROM estados where locate('$q',estado) > 0 order by locate('$q',estado) limit 10";
// Abaixo executo a sql e atribuo o resultado da consulta à variável $res
$res = mysql_query( $sql );
// Para cada resultado encontrado, será gerada uma linha no autocomplete, colocando em negrito o termo digitado.
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);
// Veja que existe o atributo de evento onselect, que executará as funções de retorno no autocomplete
echo "<li onselect="this.setText('$estado').setValue('$id','$estado','$sigla');">$html ($sigla)</li>n";
}
?>
Bom, seguindo esses passos, você poderá incluir uma funcionalidade de autocomplete poderosa em seu site. Agora basta personalizar e estilizar ao seu gosto!
Deixe seu comentário!
Wellington,
vi que esse javascript autocompletar é pago.
Esta tua versão é free?
Olá João!
É gratuita sim!
Ok. Testei aqui e funcionou muito bem.
Obrigado pelo tutorial.
muito bom
Funcionou bem, mas apenas no Mozilla, no IE e no Chrome não funciona.
bom… funciona em todos os navegadores sim… Safari, Firefox, Chrome… e até no IEca 6!
Eu inclusive não uso o IE há anos, somente para testes!
@Wellington Ribeiro
Então, tanto o seu exemplo quanto o que eu fiz aqui, ambos deram erro na biblioteca autocomplete.js na linha 2.
Aqui no mozilla funcionando tudo perfeito: http://img687.imageshack.us/img687/845/mozillaa.jpg
No IE nem aparece nada: http://img42.imageshack.us/img42/8316/63279541.jpg
E no chrome ele nao completa: http://img193.imageshack.us/img193/8711/chromem.jpg
Estranho né funcionar ai e aqui não, apesar de ser o mesmo script.
É uma pena pois foi o script de mais fácil implementação graças a sua explicação, estou a procura de outro agora.
Mas ninguém merece o IE mesmo.
Oi Rafael.
Bom, acabei testando aqui, e acredito que pode ser alguma incompatibilidade em relação a atualizações dos navegadores desde que desenvolvi a solução… Vou dar uma revisada nos arquivos, testa-los e atualiza-los…
Agradeço pelo aviso!
Realmente gente
A funcionalidade somente está funcionando no Firefox… No próximo fim de semana eu vou atualizar a versão.
Obrigado pelo aviso Rafael! Eu não havia testado antes de vc me enviar os printscreens!
Opa Rafael, Ainda não está funcionando… eu ficaria gratissimo se pudesse resolver esse lance dos outros navegadores.
ok.. estou num período com muuuito trabalho, e acabou não me sobrando tempo para atualizar os arquivos.. Não vou prometer datas, mas digo que assim que eu puder, vou fazer as devidas correções…
Me desculpem pelo trantorno!
Abraços!
Wellington,
Sem dúvidas, foi o melhor e mais bem explicado exemplo de autocomplete que ví até o momento, uma grande contribuição para toda a comunidade de programadores PHP. Seria ótimo se estivesse funcionando no IE e Chrome…
Obrigado pela contribuição!!!
Obrigado Paulo!
Estou trabalhando em um novo projeto, onde vou precisar de um autocomplete mais robusto. Em breve desenvolverei o projeto, e vou atualizar a versão do autocomplete.
mto bom o script funcionou bz aki no firefox! só gostaria de tirar uma duvida! aki qd digito o nome aparece com erro na acentuação e Ç! fica um “?” no lugar!!
Olá rogerio!
você tem que verificar a codificação de caracteres:
1 – do script
2 – dos dados no banco
Trabalhe sempre com o padrão UTF-8, e esse problema desaparece!
use
header(‘Content-type: text/html; charset=utf-8′);
no php.
Abraço!
Olá Wellington,
ótimo tutorial, desde já estou grato pela ajuda.
Uma dúvida, vi que dentro da pasta CSS tem o arquivo ‘autocomplete.gif’ que creio que seja para fazer aquele efeito de espera quando a query esta sendo carregada, isto esta funcionando? precisa configurar algo? Na página que eu apliquei o tutorial não aparece a imagem…
Wellington Ribeiro ,
Parabens pelo projeto… tambem estou no aguardo da solução.
Obrigado
Já desenvolvi uma nova solução…
veja em http://blog.idealmind.com.br/projetos/simple-autocomplete-jquery-plugin/
Att,
Foi de muito ajuda, valeu mesmo
Me tira uma dúvida…
se minha “frase” do banco de dados for muito grande, tem como eu só exibir parte dela e concatenar com “…” ???
Obrigado.
Olá Ricardo!
tem sim! use a sql como esta: select concat(substring(campo,1,100),’ …’) from table where locate(‘str’,campo);
abraço!
pô cara, eu tentei fazer assim, mas nao deu certo nao…olha como ficou:
$sql = “SELECT concat(SUBSTRING(endereco,1,10),’ …’) FROM clientes where locate(‘$q’,endereco)”
se tiver como dar uma força eu agradeço…
mas ja esta sendo muito util esse seu script, valeu mesmo
tenta assim:
$sql = “SELECT concat(SUBSTRING(endereco,1,10),’ …’) AS endereco FROM clientes where locate(‘$q’,endereco)”
e use o vetor de chave endereco para pegar o valor
Muito boa a sua solução.
Depois que implementei percebi que o autocomplete busca as ocorrencias em qualquer posição do campo.
Como eu mudo caso eu queira que essa busca aconteça apenas nos primeiros campos do campo
Ex:
WHERE campo LIKE ‘%$ocorrencia’ …
Olá Filipe!
você pode usar a sql assim:
select * from tabela where campo regexp(‘^ocorrencia’);
Parabéns Wellington Ribeiro, muito bom seu artigo e me ajudou muito.
Deu certinho o codigo e é muito preciso e simples.
Valeu……
no meu mozila da o seguinte erro:
Parse error: syntax error, unexpected T_STRING in /home/.keesha/pacificsis/public_html/ajax.php on line 37 ???
37 =$html = preg_replace(“/(” . $q . “)/i”, “$1″, $estado);
tem um erro de sintaxe no código… o que vc me passou está meio confuso, então não encontrei o erro…
Wellington, deu certo.. outra coisa, tem como eu colocar um “hidden”no echo?.. pois abaixo do input esta saindo o resultado da busca toda.
Name + id
# Dillards (1)
# Geox, USA (6)
# Nine West (5)
# Clarks, USA (12)
# Geox,Italy (8)
# Tory Buch (9)
# The Same as Consignee (11)
# Clarks, UK (13)
Coloca um limit na sql. Ex.:
select campo from table where locate(‘query’,campo) order by locate(‘query’,campo) limit 0,10
Você stá utilizando o Simple Autocomplete JQuery Plugin ? Se não, recomendo usá-lo. A integração é mais fácil e funciona nos browsers mais populares. Veja http://blog.idealmind.com.br/projetos/simple-autocomplete-jquery-plugin/
@Wellington Ribeiro
Wellinnton, usando o JQuery, qual o caminho para que no simpleautocomplete mostrar dados adicionais como no autocomplete? pelo primeiro exemplo temos: ao digitar Rio de Janeiro mostra tambem a sigla :
Rio de Janeiro (RJ) . temos como fazer isto pelo simpleautocomplete ?
agradeço antecipadamente a ajuda.