- Comunidade no Orkut
- Feeds RSS
- Peça um tutorial
- Artigos
- Blogosfera Brasil
- Corel Draw
- Design Web
- Dicas rápidas
- Dreamweaver
- Fireworks
- Flash
- Hardware
- Javascript
- Jquery
- Photoshop
- PHP
- SEO
- Windows
- Criação de WebSites
- Hospedagem de sites
- Registro de domínios
8 Colunista(s)
5 Visitante(s) On-line
191 Matérias
Indique esta notícia para um amigo, preencha os campos abaixo:
Auto-complete com Jquery + PHP
Olá internautas e usuários do nosso portal. A pedido do nosso amigo Rodrigo Domingos, vou mostrar a vocês aqui como fazer um sistema de auto-complete (Completar automaticamente). A Idéia do nosso amigo é simplesmente colocar um formulário, dentro do mesmo um campo de entrada e ao digitar nele, logo abaixo do campo aparecer uma listagem de sugestões, assim como no Google quando digitamos algo ele nos sugere várias opções.
Bom,
para facilitar a vida de todo mundo, utilizarei o famoso Jquery e seus
plugins que nos ajudam bastante na hora do desenvolvimento.
Vou utilizar neste tutorial o plugin: Jquery Autocomplete Plugin
Veja a demonstração do plugin funcionando: Demonstração do Autocomplete
A
utilização dele é bem simples, vou mostrar a vocês aqui como que ele
funciona. Criem uma tabela de clientes com essa estrutura:
Aqui,
apenas colocarei três colunas como exemplo, mas vocês podem colocar
mais colunas dependendo da necessidade de cada projeto. Feio isso,
popule sua tabela com alguns registros:
Agora, com nossa tabela criado, e a mesma tabela populada, vamos agora a parte da programação.
Faça
o download do plugin no link passado acima, crie uma pasta no seu
servidor local e descompacte o mesmo nesta pasta. Crie um arquivo índex
no mesmo nível da pasta do plugin, e no arquivo índex coloquemos:
Aqui,
apenas incluímos os arquivos necessários do plugin para utilização,
conforme diz na documentação e no Demonstrativo. Percebam que já
coloquei o campo de entrada, que é justamente nele que iremos trabalhar.
Antes de fechar a Tag <head> coloque o seguinte script:
Nesse
código, dizemos que o campo cujo id txtNome, vai executar a função do
autocomplete. Como argumento, a gente colocou o “completar.php”,
assim, o jquery (via Ajax) vai buscar as informações nesse arquivo para
listar no nosso suggest. Width, você já deve saber que é a largura da
caixinha que vai sugir quando o usuário começar a digitar.
Na documentação, o autor fala sobre todas as propriedades, métodos desse plugin, para esse tutorial, usarei somente esses ok ?
Crie um arquivo chamado “completar.php” no mesmo nível da índex.php e insira o seguinte código:
Digite algum nome, no qual cadastramos anteriormente, na campo de texto:
Bom,
é isso, creio que ficou bem explicado esse tutorial, e espero que tenha
atendido a necessidade de todos que tinham dúvidas em relação a
autocomplete!
Qualquer dúvida, pode mandar e-mail que assim que possível retorno com respostas ok ?
Abraços e bons estudos !
Mais matérias do autor
comentários (4)
Jardel comentou:
Alexandre Mattos comentou:
Rodrigo comentou:
Paulo Henrique comentou:
Copyright © Artigos e Tutoriais. Todos os direitos reservados
Ativando e Turbinando sua criatividade