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!
vi que esse javascript autocompletar é pago.
Esta tua versão é free?
É gratuita sim!
Obrigado pelo tutorial.
muito bom
Eu inclusive não uso o IE há anos, somente para testes!
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.
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!
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!
Me desculpem pelo trantorno!
Abraços!
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!!!
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.
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!
ó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…
Parabens pelo projeto… tambem estou no aguardo da solução.
Obrigado
veja em http://blog.idealmind.com.br/projetos/simple-autocomplete-jquery-plugin/
Att,
se minha “frase” do banco de dados for muito grande, tem como eu só exibir parte dela e concatenar com “…” ???
Obrigado.
tem sim! use a sql como esta: select concat(substring(campo,1,100),’ …’) from table where locate(‘str’,campo);
abraço!
$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
$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
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’ …
você pode usar a sql assim:
select * from tabela where campo regexp(‘^ocorrencia’);
Deu certinho o codigo e é muito preciso e simples.
Valeu……
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);
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)
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/
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.
baixei seus arquivos, alterei o arquivo ajax.php pra pegar os dados da minha base, mas nao deu certo, nao funciona, e tbm nao acusa erro. a unica coisa q aparece eh da variavel q na pagina ajax.php, mas isso pq ela nao esta setada.
alguma sugestao?
testei no ie e no ff
Como posso fazer um intrução para executar o comando CREATE TABLE para mim criar um form tipo para o user mesmo criar as tabelas!
E como vc consequiu deixar seu syntax com essa config?
Abraços
Parabéns.
Menos no google Chrome ……….
Alguem pode me ajudar, a pagina que contém o auto complete fica em branco e nem abre
Se alguem poder ajudar, agradeço muito.
Olá Rogério,
Eu resolvi esse problema, colocando no ajax.php o seguinte: header(“Content-Type: text/html; charset=ISO-8859-1″,true);
Roberta
Minha dúvida é esta: Tive de colocar o objeto num IFRAME. Só que, ao clicar na setinha para mostrar os itens, ele mostra somente o 1o ou 2o, já que o resto estaria ‘fora’ do iframe.. Seria que teria como resolver?
Ah, por aqui funcionou ok no IE tb.
Abraços.
Muito obrigado. http://www.llw.com.br classificados on
é simples e facil de entende-lo.
bom trabalho continue assim.
Caro Rogério de uma olhada.
pra html:
pro php:
like