Olá!!!
Bom… depois de muito suor, bateção de cabeça na minha mesa, muitos xingamentos ao meu computador (que não tinha nada a ver ‘coitado’…)… eu consegui implementar no meu sistema o autocomplete “bunitinho”, “lindinho” e “tchuco-tchuco” do jQuery UI!!!! \o/
Bom.. pra início de conversa, favor baixar aqui a versão mais recente do jQuery UI. Descompacta na sua pastinha de trabalho e mãos à obra.
Vamos precisar de dois arquivos: ‘formulario.php’ e ‘buscaDados.php’. O primeiro é onde estará o seu formulário que conterá seu campo autocomplete e o segundo, logicamente, é onde estará a pesquisa dos dados que retornarão para o autocomplete.
Antes de mais nada, em ‘formulario.php’ vamos fazer as chamadas para os arquivos .css e .js que vamos precisar para implementar o autocomplete. Todos se encontram no arquivo que você baixou e descompactou na pastinha de trabalho. No meu caso estou trabalhando com a versão 1.8.9 do jQuery UI que me trouxe a versão 1.4.4 do jQuery.
<script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js"> </script><link type="text/css" href="jquery-ui-1.8.9.custom/css/redmond/jquery-ui-1.8.9.custom.css" rel="stylesheet"/>
Só para lembrar, estas linhas são inseridas dentro das tag’s <head>e </head>. =)
Também no arquivo ‘formulario.php’, vamor criar um <form> </form> e dentro dele criar um textfield que vamos nomear de ‘auto’ para facilitar o processo:
<input type="text" id="auto" />
A propriedade ‘id’ do campo é o que permite a referenciação no jQuery. Agora vamos criar uma função ready para criar o campo autocomplete; esta função vem logo abaixo da referenciação dos arquivos .css e .js.
<script type="text/javascript">
$(document).ready(function() {
$('#auto').autocomplete(
{
source: "buscaDados.php",
minLength: 2
});
});
</script>
Viu!? Estou dizendo que o campo ‘auto’ é um campo ‘autocomplete’ e que os dados virão do source ‘buscaDados.php’. Com a propriedade ‘minLength’ eu estou dizendo que o autocomplete será ativado quando eu tiver um mínimo de 2 caracteres digitados no meu campo ‘auto’.
E para finalizar, no arquivo ‘buscaDados.php’ você vai fazer a conexão com o banco de dados e retornar as informações da tabela que você quer:
$hostname = "localhost";
$user = "root";
$pass = "";
$basedados = "teste";
$connect = mysql_connect($hostname,$user,$pass) or die ("Impossível estabelecer conexão com o servidor de banco de dados");
mysql_select_db($basedados) or die ("Impossivel estabelecer conexão com o banco de dados");
//busca valor digitado no campo autocomplete "$_GET['term']
$text = mysql_real_escape_string($_GET['term']);
$query = "SELECT * FROM tabela WHERE campoTexto LIKE '%$text%' ORDER BY campoTexto ASC";
$result = mysql_query($query);
//formata o resultado para JSON
$json = '[';
$first = true;
while($row = mysql_fetch_array($result))
{
if (!$first) { $json .= ','; } else { $first = false; }
$json .= '{"value":"'.utf8_encode($row['campoTexto']).'"}';
}
$json .= ']';
echo $json;
Então… é assim que se cria um campo autocomplete como o da imagem abaixo, que é um print de um pedaço do meu sistema:
Você pode formatar o autocomplete de várias formas, é possível personalizar um tema ou escolher um pré-existente para baixar aqui.
O exemplo que eu me guiei para conseguir aprender a usar esta funcionalidade foi o do burnmind.com que também disponibiliza o fonte para download e um demo. Obs.: o demo deles está configurado para que o autocomplete apareça a partir da 3ª letra digitada (experimente digitar “col”).
Espero ter ajudado! Qualquer coisa é só comentar aew…. =)
Até mais.
Oliveira's Dev 
Olá queridona! Muito legal o seu blog!
Uma dica.
O PHP tem uma função que transforma objetos PHP em objetos JSON.
Um array php por exemplo:
$array = array(“primeiro”,”segundo”,”terceiro”);
transformado em json pelo php:
echo json_encode($array);
resultado:
{“primeiro”,”segundo”,”terceiro”}
sem mágica dá pra fazer coisas mais complexas, como gerar a entrada para o seu campo Autocomplete!!
Beijão!
Obrigado pela dica, obrigado mesmo!
muito legal seu post..mas lindinha..nao consegui nem com reza brava fazer o meu funcionar..é um projeto q estou desenvolvendo para meu TCC e o autocompletar vai adiantar cerca de 30% do meu sistema..vc poderia ver o q esta de errado no meu codigo?
//HTML
//FUNCAO JQUERY
$(‘”#autocomplete input#buscar_usuario”‘).autocomplete({
//source: [“c++”, “java”, “php”, “coldfusion”, “javascript”, “asp”, “ruby”]
source:”class.control.autocomplete.php”, minLength:2
});
//CHAMADA AO BD
$oGeral = new cGeral();
//echo “alert(‘balalbdda’)”;break;
$acao = 3;
$nome_tabela = “usuario”;
$parametro = “nome_usuario”;
$valor_parametro = mysql_real_escape_string($_GET[‘term’]);
if($rs = $oGeral->control_Buscar($acao, $nome_tabela, $parametro, $valor_parametro)){
$linhas = $rs[0];
foreach ($linhas as $linha){
$array = array($linha->id_usuario,$linha->nome_usuario);
//echo “id_usuario’>$linha->nome_usuario”;
//echo “”;
}
echo json_encode($array);
faltou o HTML
form id=”autocomplete” action=”” method=”post”
input id=”buscar_usuario” name=”nome_usuario” type=”text” size=”70″ /
/form
Ei Gustavo, que bom que conseguiu descobrir o que estava faltando… Mas se precisar de mais alguma ajuda e eu puder ser útil, estarei por aqui… o/
ola amigos. fiz o seguinte html:
ja inseri no head o css e o js. mas ele nao busca nada. se faço o teste com o arquivo citado no tutorial acima, ele busca normal. o que pode estar acontecendo?
form name=”autocomplete” style=background-image:url(images/buscay.png); action=”buscar.php” method=”post” onsubmit=”return valida();”>
</form
Olá colega… olhando assim fica difícil de saber o que está faltando. Por acaso não esqueceu de ‘linkar’ o campo do seu formulário à função autocomplete no $(document).ready(function()… ??? Qualquer coisa também, me mande um email com os seus arquivos que eu dou uma olhadinha…
Boa sorte!
qual teu email elaine? dai mando ele pra ti ver.
Boa tarde elaine, nao estou conseguindo fazer a ligacao com meu banco, ja tentei varias formas, inclusive algumas coisas que foram citadas aqui por outros, veja o codigo que tenho:
HTML
$(document).ready(function() {
$(‘#auto’).autocomplete(
{
source: “buscaDados.php”,
minLength: 2
});
});
PHP – buscaDados.php
Ei Cleidson,
Me desculpe a demora. Você já conseguiu fazer a ligação com o seu banco? Se ainda não, pode especificar melhor o que você tem no seu arquivo ‘buscaDados.php’???
Abraço.
Olá Elaine. Parabéns pelo post.
Uma dúvida. O meu está rodando só que ele traz todos os valores que tenho no banco. Mesmo eu digitando um valor no campo ele traz todos do banco, sem a filtragem.
Observei que você põe o nome do campo ‘auto’ e na hora de fazer o get, você faz buscando uma variável chamada ‘term’.De onde ela apareceu? Acho que o meu erro está nessa parte…
Oi Elaine. Já resolvi! Era pra usar o valor get[‘term’] mesmo e eu estava substituindo a palavra ‘term’ pelo nome da minha variável. Obrigado.
Ei Cícero, que bom que conseguiu! O ‘term’ é do próprio jquery-UI, é o nome que ele dá pra variável dele que representa o texto digitado no seu campo autocomplete. =)
boas galera aqui edu;
saquei esse script autosuggest, mas nao consegui colocar ele a funcionar, pois ele so funciona metade, em que faco correctamente a chamada a bd e tudo bem ate apresentar os resultados, ou seja quando quero selecionar um dos resultados,nao linka o mesmo!! esta faltando o ” ” tags?? pois nao entendo muito bem o “json”, somente entendo um pouco de “php”…. se me puder ajudar me mande um email por favor!!!
Gratos!
cumprimentos
Parabéns Elaine!!!!
Muito bem exemplificado, um pouco de “intuição programística” e deu certo de primeira !…muito obrigado, estava procrastinando há semanas pra implantar esta função
Boa tarde, o meu script funcionou perfeitamente quando não utilizo um formulário caso eu utilizo um formulário não está conseguindo encontrar o campo pelo id exemplo:
$(document).ready(function()
{
$(“#s”).autocomplete(
{
source: “palavras.php”,
minLength: 1
});
});
ocorre o erro de “$(“#s”).autocomplete is not a function”
já se eu tiro o meu input de dentro do formulário funciona perfeitamente.
Ei Vitor, pode enviar esse seu código para elainecro@gmail.com para eu ver o que que tá pegando? Mande uma versão que funciona e a outra que não funciona que eu vejo se consigo te ajudar. =)
Boa noite, eu utilizei o noConflict(); e funcionou pois eu estava utilizando duas bibliotecas e acabou dando conflito
Ahh… ainda bem que eu te perguntei porque estava inserindo o jquery duas vezes no seu código né???rsrsrs… Muito bom! Parabéns! =)
Olá e se fosse mais de um campo de autocomplete ? como faço para reconhecer mais de um campo Input ?
Tinha pensado em fazer uma função…vou testando aqui se achar a resposta prometo que posto! ^^
Ei Bruno, repare que ao fazer :
$(‘#auto’).autocomplete(); estou dizendo que o meu input de id=’auto’ será autocomplete.
Então basta nomear os ids dos seus inputs e chamá-los. Por exemplo, para os inputs abaixo:
Indico que são autocomplete chamando a função autocomplete pelo id deles:
$(‘bruno’).autocomplete();
$(‘elaine’).autocomplete();
Olá, primeiro parabéns é o único que achei que ficou 100% em meu novo trabalho, mas tenho uma duvida… no antigo que usava consegui colocar o resultado com link, quando a pessoa clicava ia direto ao resultado ao envés de jogar para o campo. mas neste não estou conseguindo… poderia me ajudar? obrigado ai!!!! 😀
Bom André, dei uma olhada na documentação em http://jqueryui.com/demos/autocomplete/ e na guia de ‘Events’ existem dois eventos que talvez possam ser aproveitados por você, o select e o change. Talvez você consiga usar um destes eventos para chamar uma função que vai criar o link que você precisa.
Espero te ajudado. =)
Eu aqui de novo :P, apenas gostaria de saber como você faz para tratar a questão de acentuação no autocomplete, pois não está funcionando mesmo mudando utf,iso etc, se você souber agradecido desde já
Ei Vitor,
Não costumo ter problemas com acentuação no autocomplete. Mas tente verificar se o charset de todos os seus arquivos de trabalho estão iguais. Caso isso não resolva, experimente trazer as palavras do banco de dados usando as funções utf8_decode / utf8_encode.
😉
\o/ utf8_decode! valeu
eita :s tbm tive problema com acentuação
Primeiro não aparecia os acentos, ai mudei para iso-8859-1 ai os acentos voltaram.
SÓ QUE quando digito com acento pra fazer a busca. ele nao reconhece o acento pra fazer a consulta :S
Estou com o mesmo problema e tentando uma solução. Você chegou a achar alguma?
Muito bom, obrigado. Com certeza deixou minha aplicação muito melhor 😀
ola Elaine
Olha eu comecei agora a trabalhar com o PHP e queria fazer o autocomplete ,segui o teu exemplo mas não tive sucesso , criei os 2 ficheiro o com a caixa de texto :
auto1.php
autocomplete demo
Select a programming language:
$(document).ready(function()
{
$(‘#autocomplete’).autocomplete(
{
source: “exemplo_json.php”,
minLength: 1
});
});
E o ficheiro exemplo_json.php
Mas no browser quando chamo o auto1. php
E coloco o nome de um pais no campo de texto porque eu utilizei uma tabela de paises apenas tenho a mensagem ” No search results.”
E fiz o teste do exemplo_json no browser do seguinte modo
http://localhost/telma/admin/exemplo_json.php?term=Mozambique
e dá-me o seguite erro
Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\Telma\admin\exemplo_json.php on line 23
este erro é na linha do while , quando comento a seguinte linha
$text = mysql_real_escape_string($_GET[‘term’]);
e na linha de baixo coloco
$query = “SELECT nome_pais FROM paises
e testo o exemplo_json aparecem a lista de paises
[{“value”:”Afghanistan”},{“value”:”Albania”},{“value”:”Algeria”},{“value”:”American Samoa”},{“value”:”Andorra”},{“value”:”Angola”},{“value”:”Anguilla”},{“value”:”Antarctica”},{“value”:”Antigua and Barbuda”},{“value”:”Argentina”},{“value”:”Armenia”},{“value”:”Aruba”},{“value”:”Australia”},{“value”:”Austria”},{“value”:”Azerbaijan”},{“value”:”Bahamas”},{“value”:”Bahrain”},{“value”:”Bangladesh”},{“value”:”Barbados”},{“value”:”Belarus”},{“value”:”Belgium”},{“value”:”Belize”},{“value”:”Benin”},{“value”:”Bermuda”},{“value”:”Bhutan”},{“value”:”Bolivia”},{“value”:”Bosnia and Herzegovina”},{“value”:”Botswana”},{“value”:”Bouvet Island”}]
Então não qual pode estar a ser o meu erro…
bjs
OI! Muito bom o post e a dica. Ainda não testei, mas estou com uma dúvida: Tenho como pesquisar em mais de um campo, ou mais de uma tabela? eu precisaria alterar somente a Query (por exemplo: select * from cadastro where titulo like ‘%$text%” OR id like ‘%$text%’), ou mais algum outro parâmetro na função?
Obrigado!
Sou muito leigo nisso , só uma pergunta besta. Quantos forms eu posso ter em uma unica pagina.php ???
Quantos você precisar. Então basta verificar de qual form vieram as informações quando for trata-las.
Pra mim aparece logo no fim do meu TextFiled a mensagem : No search results.
ja conferi tudo e não sei o que ta errado, estou dando cabeçada na mesa . rssss
Rsrs..ainda está precisando de ajuda? Se estiver, manda sua base e seu código por email que de noite eu olho.
Opa! já te enviei, nem precisa ter pressa, quando der você vê isso.
Muito obrigado por seu compartilhamento , nem sei como lhe agradecer.
Alguém conseguiu implementar o autocomplete no evento click? ou seja, quando clicar no campo já trazer uma lista ..
Grato!
Vagner
Eliane,
no meu projeto não funfa de jeito nenhum….e como não sei muito de jquery….gostaria se alguem pudesse me ajudar…
Obrigado pelo post, Eliane! Tenho uma dúvida… minha tabela é composta por codigo e nome, o codigo é o que é gravado na tabela principal…como eu pegaria este código quando fosse digitado o nome na entrada de dados e assim gravar na tabela principal? Obrigado pela atenção
Valeu!
se puder ajudar a mais alguem:
prepare(“select DISTINCT nome as value from empresas where nome LIKE ? ORDER BY nome ASC “);
$stmt->bindValue(1,”%$nome%”,PDO::PARAM_STR);
$stmt->execute();
$sera = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($sera);
?>
🙂
Ola, e pra ao invés de autocompletar, exibir um link para a pessoa clicar e abrir em uma nova guia, tem como adicionar essa função.
Parabéns, eu vi vários exemplos de autocomplete, e esse foi o mais fácil e rápido de fazer.
Muito bom… Me ajudou muito…
Só tô com um problema agora…
Não consigo fazer ele exibir os resultados numa tela modal…
Alguém sabe o porq?
Gostaria muito de saber como capturar a saída seleciona no caso de autocompletar em um select. Alguém sabe? Vejam esse código http://jsfiddle.net/emirdeliz/swqwLfxu/. Nele seleciona e autocopleta. Mas gostaria de pegar o resultado do autocomplete ou da seleção e preencher um input!