Autocomplete do jQuery UI com PHP

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.

About these ads

Tags:, , ,

About ElaineCRO

Graduada em Sistemas de Informação. Programadora Delphi, C#, PHP. Apaixonada pela minha profissão, doida por forró e pelas pessoas que me dão valor. =^.^=

45 responses to “Autocomplete do jQuery UI com PHP”

  1. Zozinho says :

    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!

  2. Renan says :

    Obrigado pela dica, obrigado mesmo!

  3. gustavo says :

    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);

  4. gustavo says :

    form id=”autocomplete” action=”” method=”post”
    input id=”buscar_usuario” name=”nome_usuario” type=”text” size=”70″ /
    /form

    • ElaineCRO says :

      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/

  5. karafath says :

    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?

  6. karafath says :

    form name=”autocomplete” style=background-image:url(images/buscay.png); action=”buscar.php” method=”post” onsubmit=”return valida();”>

    </form

    • ElaineCRO says :

      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!

  7. karafath says :

    qual teu email elaine? dai mando ele pra ti ver.

  8. Cleidson Daniel says :

    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

    • ElaineCRO says :

      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.

  9. Cícero says :

    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…

    • Cícero says :

      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.

      • ElaineCRO says :

        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. =)

  10. Eduardo Ribeiro says :

    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

  11. Paulo Henrique Luvisoto says :

    Parabéns Elaine!!!!

  12. Eduardo says :

    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

  13. Vitor says :

    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.

  14. Vitor says :

    Boa noite, eu utilizei o noConflict(); e funcionou pois eu estava utilizando duas bibliotecas e acabou dando conflito

  15. Bruno Giubilei says :

    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! ^^

    • ElaineCRO says :

      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();

  16. Andre Neder says :

    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!!!! :D

  17. Vitor says :

    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á

    • ElaineCRO says :

      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.
      ;)

  18. Celino says :

    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

  19. Rafael Abreu says :

    Muito bom, obrigado. Com certeza deixou minha aplicação muito melhor :D

  20. Telma Jackson Langa says :

    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

  21. Hugo says :

    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!

  22. Sergio Porssionatto says :

    Sou muito leigo nisso , só uma pergunta besta. Quantos forms eu posso ter em uma unica pagina.php ???

  23. Sergio Porssionatto says :

    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

    • ElaineCRO says :

      Rsrs..ainda está precisando de ajuda? Se estiver, manda sua base e seu código por email que de noite eu olho.

      • Sergio Porssionatto says :

        Opa! já te enviei, nem precisa ter pressa, quando der você vê isso.
        Muito obrigado por seu compartilhamento , nem sei como lhe agradecer.

  24. Vagner says :

    Alguém conseguiu implementar o autocomplete no evento click? ou seja, quando clicar no campo já trazer uma lista ..

    Grato!

    Vagner

  25. edcurumimEdsonCurumim says :

    Eliane,
    no meu projeto não funfa de jeito nenhum….e como não sei muito de jquery….gostaria se alguem pudesse me ajudar…

  26. Megallex says :

    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

  27. Jaime Dias says :

    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);

    ?>
    :)

  28. giachini says :

    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.

  29. Matheus Hentz says :

    Parabéns, eu vi vários exemplos de autocomplete, e esse foi o mais fácil e rápido de fazer.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Seguir

Obtenha todo post novo entregue na sua caixa de entrada.

%d blogueiros gostam disto: