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|$value\n";
}
?>
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
Related Posts:
The Autocomplete – Jquery Plugin by Jaydson Gomes, unless otherwise expressly stated, is licensed under a Creative Commons Attribution 2.5 Brazil License.
#1 by humberto at 3 de abril de 2010
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?
#2 by jaydson at 3 de abril de 2010
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.
#3 by Marcelo Gomes at 23 de abril de 2010
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.
#4 by jaydson at 24 de abril de 2010
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.