Um recurso muito bom que podemos aplicar em nossos Sistemas é o Autocomplete.
Isso ajuda muito o usuário na hora de selecionar uma opção. Além de ser visualmente mais agradavél, este recurso faz com que apenas apareçam as opções de acordo com o que é digitado no campo.
Imaginei a situação onde o usuário precisa selecionar um determinado valor em um <selectbox>. O porém é que esse campo será populado com centenas de valores. É extremamente ruim ter que ficar procurando a opção correta em uma lista enorme de opções.
O que esse plugin nos proporciona é uma forma simples de implementar um campo do tipo Autocomplete.
O exemplo que preparei é bem simples, mas mostra o poder deste plugin(um dos melhores que já usei).
O que vamos fazer é um script PHP que retorne os Posts aqui do Blog. Segue o código abaixo do arquivo search.php:
<?php
$items = array(
'Text Area Resizer - JQuery Plugin'=>'1',
'Text Limiter - Jquery Plugin'=>'2',
'Plugins Jquery'=>'3',
'theWebMind.org'=>'4',
'Hacks CSS'=>'5',
'Json'=>'6',
'PHP - Problema ao carregar a DLL php_pgsql.dll'=>'7',
'RichBlocks - Um Framework Para Implantar Interfaces RIA em Sistemas Web'=>'8',
'PHP Classes'=>'9',
'RIA - Aplicacoes Ricas para Internet'=>'10',
'Campanha Atualize o seu Navegador'=>'11',
'Internet Explorer 8'=>'12',
'Projeto PHP Counter'=>'13',
'Jquery'=>'14'
);
foreach ($items as $key=>$value){
echo "$key|$valuen";
}
?>
Note que neste código eu montei “na mão” um array de Posts. Mas nada me impediria de ter feito uma consulta no banco de dados e ter montado o array dinâmicamente. Isso serve para qualquer situação.
Bom, já temos os dados que precisamos para popular o campo de Autocomplete.
Basta criar um campo do tipo <input> com uma ID especifica. No meu ficou assim:
<body> <p> <label style="font-family:verdana; font-weight:bold; font-size:18px;"> Posts Jaydson.org: </label> <br> <input style="width:300px;" type="text" id="posts" /> </p> </body>
Agora que já temos o HTML, vamos implementar o Plugin.
O que deve ser feito é informar qual <input> será capaz de se autocompletar, desta forma:
<script type="text/javascript">
$().ready(function() {
$("#posts").autocomplete("search.php", {
width: 440,
scrollHeight: 220,
selectFirst: true
});
})
</script>
Desta maneira, o <input id=”posts”> receberá o conteúdo da página PHP que criamos anteriormente.
Nota: O Plugin ainda possui uma série de opções que podem ser especificadas além de width, scrollHeight e selectFirst .
Veja o resultado:
Minha Avaliação: Nota 10.0
Compatibilidade: Firefox 2.0+, IE 6+, Safari 3.0+, Chrome 2.0+
Site oficial do Plugin: http://docs.jquery.com/Plugins/Autocomplete
Download
Ola amigo bem legal seu artigo parabens eu fiz aqui e deu certinho mas eu nao estou conseguindo pegar o id do campo por exemplo eu pega um lista de nomes do banco com seus ids mas quando envio o form por post ele envia o nome que veio no seggest e possivel pega o id com esse plugin?
Ola Humberto, não entendi muito bem o que tu precisa.
Se queres pegar o ID de cada registro, basta trazer esta informação na consulta SQL, e popular o JSON com ela.
Tente explicar um pouco mais, e coloque o código para que eu possa te ajudar mais.
Obrigado por visitar o Blog.
Olá Jaydson muito bom seu artigo.
Porém estou com uma dúvida como fazer com que a consulta vinda do banco se feita somente uma vez, pelo que percebi a cada nova consulta tenho que acessar os dados novamente no banco.
Olá Marcelo!
Tudo vai da sua necessidade, mas nesse exemplo o que acontece é realmente isso. Uma nova consulta a cada trecho digitado.
Porém, o plugin implementa um “cache” automático, para palavras pesquisadas. Isso quer dizer que se o usuario ja pesquisou pela palavra “X”, e torna a procurar por “X”, a requisição não é feita novamente, utilizando o cache.
Para fazer com que a busca na base aconteça apenas uma vez, o que tu pode fazer é manter os dados em um objeto JSON, ou algo assim. Mas cuidado com a quantidade de dados que tu vai manter em client-side. As vezes é melhor fazer a busca na base, mas como eu disse no começo, depende da sua implementação.
Pois é um bom script, mas sem ser possivel retornar o id fica meio inutil num sistema real.
Pois por exemplo, esses resultados.
Nome e ID
Fulano de Tal | 55
Minha ideia seria por o nome apenas pra uma mascara visual e num hidden por esse id.
Mas como eu conseguiria pegar o id do arquivo search.php.
Por exemplo:
Eu tenho um arquivo com nomes de aeroportos e eu preciso pegar o ID deles por exemplo:
‘Congonhas – São Paulo’=>’CSP’,
Aqui no caso o ID seria “CSP”, como eu faço para escrever o campo Congonhas – São Paulo no autocompletar e mandar apenas o ID “CSP” quando eu clicar no botão enviar?
Poderia me ajudar, grato
Estava usando este plugin em meu sistema ainda em desenvolvimento e ele realmente é muito bom, o problema é que com a versão mais recente do internet explorer (versão 9) ele não funciona legal. Alguém já conseguiu resolver o problema?
Ola Guilherme!
Cara, qual versão tu esta usando?
Porque o autocomplete é nativo agora(faz um tempo) no jQueryUI:
http://jqueryui.com/demos/autocomplete/
Qual o problema específico que esta ocorrendo?
Então, instale o IE9 e entre no site Jquery e procure por plugins de autocomplete, muitos não funcionam com essa versão do IE… É realmente uma tristeza. A versão que estou usando é a 1.1, vou entrar neste link que passasse pra ver se tem mais recente.
Valeu pela força. Abraço!
Puts, falei besteira cara! Não é a versão que estou usando a minha versão não é jqueryUI… Mas passarei a usá-la agora que vi que funciona melhor que a que eu estou usando. Abraço!
Assim como CACA-COBRA e o Matheus tbm estou precisando salvar o ID em um campo hidden e não estou conseguindo pegar.
Alguma sugestão??
Nossa, ótimo material, parabéns!
Amigo, percebi uma diferença na resposta ao digitar uma letra no seu codigo e no código original. O Seu é simples e fácil de usar, como faço para ter a mesma velocidade quando digitar uma palavra?
Outra questão, tenho 2 campos, um chamado ID e outro Nome, preciso ao selecione o nome o campo ID receba o id do nome selecionado. Como posso fazer isso?
Obrigado.
ai galera tô presizando de forçainha quero coloca o autocomplete no meu search já tentei mais não consegui.
Code meu search:
Cara, como que eu faço uma seleção especifica? Exemplo: quero iniciar o autocomplete somente apos digitar * (exemplo) e buscar os nomes das pessoas no DB na ordem alfabetica, ou seja, se eu digitar “*A”, trazer “Alessandra Albertro ” etc? Tem como fazer? Se tiver, tem como me ajudar? To meio perdido! Vlw.Abraço