| Maior acervo de vídeo aulas da web

Matheus Moura
4.684 visitas
23 out 2009
44 Comentários

Não consegue visualizar a vídeo aula?

Recurso auto completar utilizando AJAX, jQuery e PHP

Olá para todos! Meu nome é Matheus Moura, e nesta vídeo aula vou mostrar para vocês como se cria e utiliza o recurso/plugin auto-completar utilizando jquery. Espero que gostem e boa aula a todos!

Arquivos Utilizados
Jquery

Você gostou dessa Vídeo Aula, então compartilhe com seus amigos

Comentários

RODRIGO MARTINELLI – BOM JESUS DOS PERDÕES – SP

eiiita… espaço , ponto espaço.. kkk

ferinha demais.. mato a pau, função utf mais auto completar show de bola

parabens e obrigado!!

espaço ponto espaço uhauha
http://www.registrodemusica.com Fauzer Cruz

O link dos aquivos que vc disponibilizou esta corrompido…..resol ve aí pra nos….
http://apersistenciadamemoria.com Michel Araujo

Ótima video aula.

Apenas uma sugestão: Coloca o link para os arquivos da página oficial do plugin do jQuery, para que a qualquer tempo se tenha a versão mais atualizada, pra evitar esse tipo de problemas com o link expiradoe principalmente por uma questão de segurança.

[]‘s
http://tutorial-city.net Tutorial City

Não precisa selecionar tudo no banco de dados , já que você só quer o nome. Selecionar só o que vai usar agiliza na hora do acesso ao banco de dados(que são razoavelmente lentos).
SELECT nome FROM clientes WHERE nome LIKE ‘%$q%’

Pra corrigir os acentos eu usaria htmlentitles ao invés de utf8_encode, até por que esta última só transforma de iso-8859-1 para utf-8, e htmlentities funciona em qualquer tipo de charset.

Bom tutorial
ReGiNaLdO SaNtAnA

Olá Michel! Tô passando aqui pra agradecer por ter atendido ao meu pedido, pois você me tirou uma dúvida grande… E o escript funcionou bacaninha aqui no meu sistema… vlw e parabéns!!!
http://www.matheusmoura.com Matheus

Sim, com certeza, mas usei utf8_encode porque iria funcionar de qualquer forma.
Vlw.
http://www.matheusmoura.com Matheus

Galera, as correções nos link já estao ok! Podem baixar tranquilo agora!
Fernando Gonçalves

Matheus, você tem que fazer do jeito que o Tutorial City está falando pois pois so ta certo do jeito dele, ele é o pai da programação, acho que foi os antecessores dele que inventaram as linguagem existentes pois vejo que em todas as vídeo aulas que são postadas aqui sempre o jeito dele é o melhor.

Um abraço a todos

http://www.videoaulasbrasil.com.br David CHC

@Fernando Gonçalves, acho é muito importante a contribuição de todos nas vídeo-aulas, as dicas do Tutorial City é válida, pq são postadas alternativas, ou dicas, como também cito nas vídeo-aulas dele, e tbm nas minhas vídeo-aulas. A idéia principal, é agregar mais informações , isso só ajuda, tanto quem fez a aula, e quem ler os comentários. Acredito que isso vai ajudar a todos, se vc tive uma dica , ou uma correção na vídeo aula de qualquer colaborador, faça, assim todos saem ganhando.

http://tutorial-city.net Tutorial City

@Fernando Gonçalves
Eu mostro uma alternativa e justifico, se não acha razoável, então não use.
Você é a primeira pessoa que eu vejo reclamar por aprender a fazer de outra forma.
http://www.matheusmoura.com Matheus

FERNANDO GONÇALVES, não acho! o tutorial city é sim, um excelente programador, sempre com boas soluções, mas eu faço do jeito que eu tenho conhecimento e prática, e não do jeito que você quer! Estou colaborando com o site com o conhecimento que eu tenho! Enquanto a maioria gostar e os admins do site tbm, vou continuar com as aulas! Obrigado pelo comentário. Vlw galera.
http://boituvasp.com.br Abner Soares

quem versão do vista vc esta usando?

parabéns, ótima aula!
http://www.matheusmoura.com Matheus

Eu estou usando o Windows 7 Abner. Vlw.
Leonardo Tavares

Matheus ótima aula! Nunca pensei que esse efeito poderia ser tão simples
Leonardo

Boa video aula.

Sobre acentuação….

Fiz um sistema de busca por categorias.
Tenho alguns livros cadastrados no banco.

Quando digito o nome de um livro com acento no campo de busca, ele não encontra nenhum resultado. Mas se eu digito o mesmo nome sem o acento ele acha o livro.

Queria saber como resolver isso.
Leonardo

@tutorial City

Usei o html entities pela primeira vez lendo um pouco sobre no manual.

Usei da seguinte forma:

echo htmlentities($linha['titulo']) . “|” . htmlentities($linha['titulo']) . “\n”;

Tem um livro no meu banco chamado:
Com o pé na estrada. No alto completar O acento aparece normalmente, mas se eu seleciono ele, ele aparece no campo da seguinte forma:
Com O Pé Na Estrada.

Oh e agora, quem poderá me ajudar?
Leonardo

Omg ele apareceu certo aqui….mas no campo aparece com o codigo :

com o p & e a c u t e ; na estrada.
http://tutorial-city.net Tutorial City

@Leonardo
–Sobre a sua segunda dúvida:
Verifique como o texto está salvo no banco de dados, só a partir daí que pode começar a debugar.
————————————————-
–Sobre a sua primeira dúvida:
O comportamento que você está descrevendo me pareceu estranho, então decidi fazer uns testes, coloquei um texto acentuado(codificado) e peguei esse valor pra jogar dentro de um input, e com ambos os métodos (.text() e .html()) o valor retornado era o esperado, e não o que você disse. Então fui em busca de outra explicação. Decidi analisar o plugin e persebi que ele guarda o valor retornado (do arquivo de PHP, ou seja, já com a função htmlentities aplicado) em uma variável, e depois joga esse valor no input (caso você clique na opção), e é exatamente isso que faz aparecer o caractere acentuado. Provavelmente o autor do plugin fez isso pensando na performance, já que é muito mais fácil pro javascript pegar um valor de uma variável do que pega-lo no DOM (no HTML).
Existem duas formas de resolver isso: a primeira é seguir o que o Matheus fez, assim o caractere será guardado já acentuado na variável; a segunda solução é modificar o plugin, que não vai ser uma tarefa lá tão simples.
Eu sugiro que você siga os passos do Matheus e use a função que ele usou. Quando sugeri usar a função htmlentities não imaginei que o plugin se comportasse dessa forma, então foi uma precipitação da minha parte. Por outro lado aperendi um bocado de coisas com esse pequeno estudo, por isso é legal discutir coisas desse tipo nos comentários.
Mas ainda continuo recomendando que use htmlentities, porém somente onde você não vai usar esse plugin.

Abraços
Leonardo

@Tutorial City

Com certeza aprendo muito aqui, seja nas video aulas ou nos comentarios.
Obrigado pela atenção.
———————————————-
Tirei um print da minha tabela no banco:

http://img40.imageshack.us/img40/3782/bancoo.jpg

O texto lá está escrito normalmente, Mas na hora da busca se eu digito no imput qualquer palavra com acento ele não encontra o item. Ele só encontra o item se eu digitar sem acento. Por exemplo o Livro “Com o pé na estrada”, ele so encontra se eu digitar ” Com o pe na estrada”, ou se eu digitar “pe”.
Leonardo

Aqui tá o codigo da minha busca:

http://pastebin.com/d106975a

useu o header(“Content-Type: text/html; charset=utf8″,true);
tanto utf8 como ISO-8859-1.
http://tutorial-city.net Tutorial City

@Leonardo
Dá uma olhada no que está retornando da sua página. Usa o Firebug pra ver o que o script tah colocando nas opções quando você digita. Também Pode acessar sua página direto (a página que pega os dados do banco de dados) e fazer jogar na tela o que retorna depois da manipulação com o PHP. O macete é ir debugando passo a passo, pra ver em qual ponto a coisa está saindo do esperado e finalmente ter um local pra dedicar seus esforços a fim de resolver o problema.

Abraços

http://www.videoaulasbrasil.com.br David CHC

Vou dá o meu pitaco sobre os caracteres. Eu vi sua tabela @Leonardo, e está em utf-8, então toda a sua aplicação tem q está nesse padrão. Só q muitas pessoas dizem q tem problema mesmo com uft-8 os caracteres fica bagunçado, na verdade o problema vc tem q salvar o Documento tbm no formato UTF-8. Não sei qual o programa q vc utiliza, eu estou utilizando atualmente o programa chamado PSPAD, é gratuito e fácil de usar tbm. E vc tem a opção de colocar o Formato de UTF-8, acho q tbm vc pode fazer no NotePad++, não me lembro se no Dreamweaver tem essa opção, q bastante tempo não mexo. Então pra resolver isso, vc teria q salvar em tbm o documento em uft8, não só colocar a metag, pelo menos comigo esse problema acabou quando adotei isso.

Leonardo

Ok, não conhecia o firebug, vou testar.

Mais uma vez obrigado pela atenção.
Leonardo

David e Tutorial City,
consegui resolver da seguinte forma:
Recriei o banco em latin1_swedish_ci,
fiz a busca digitando com o acento no campo, funcionou, ele retornou corretamente o resultado, porém a letra que recebe o acento aparecia com caracteres estranhos, aí no header mudei o charset pra utf8 e pronto, o resultado apareceu certinho. A busca agora funciona perfeitamente.

Mais uma vez grato pela atenção, e desculpem o excesso de posts.
Pedro Antonio

Gostei do seu video.
Gostaria de fazer um pedido: você pode fazer uma vídeo aula sobre jParallax?

Vlw!
Leonardo

Matheus, minha busca é por categorias:
titulo, autor, editora, isbn, ilustrador etc;
Como faço para quando selecionar outra categoria o auto completar busque os dados relacionados aquela categoria?

tentei adaptar aqui mas sem sucesso;

obrigado.
webson

Ola matheus, parabéns suas video aulas são muito boas, gostaria que vc fizese uma video aula, de paginação como os sites para baixar filmes, 1 2 3 4 e como vc é o rei do jquery vi em um site qnd clik para a proxima pagina fica com efeito de uma pagina de livro abrindo…. sucesso garoto
webson

este recurso serve para busca no site? como faço para busca arquivos no meu site? obrigado
Wendel Tavares

Cara to precisando disso urgente, por favor arruma o link dos arquivos ou coloca em outro servidor…
achei similares na internet so que sem sua excelente explicação.
Valeu cara e nao se esqueça dos arquivos…
http://www.amopernambuco.com.br Paulo

Aew, ótima aula, eu fiz e deu certo, tipo no meu site a busca fica no banner, e quando eu abro o banner.php ele funciona, mais o resto das paginas são com “includes” e exemplo, no index.php ele so aparece a primeira letra dos 2 primeiros registro.

Coloca os arquivos par downloads ai também por favor.
Rogerfpa

Olá Matheus, muito boa a aula, como sempre!
O link para os arquivos utilizados está quebrado… você pode verificar isso?
Muito obrigado!
romulo

Pow kara arruma ae o link ae nao da pra baixar o jquery nao e nao sei qual e la no site nao flw
Diogo

Não estou conseguindo fazer com que os dados apareçam. Da pra disponibilizar o código para download??

Outra coisa de onde vem a variavel $_GET['q'] ??

Abs.
http://www.matheusmoura.com Matheus Moura

A variavel GET['q'] vem do próprio plugin. Vlw.!
Anderson

Olá Matheus tem como vc arrumar o link para baixar os arquivos da aula…
Att,
Anderson
Allan

Olá Matheus,

Muito boa a aula, só que ainda não consegui concluir.Você poderia arrumar o link de arquivos utilizados, tenho muitas dúvidas, talvez com esses arquivos eu possa sana-las.

Obrigado
Allan
Carlos

Por favor, coloca os arquivos utilizados novamente, pois o link está off. Obrigado
http://www.agenciarroba.com.br Eduardo

Olá Matheus,
Primeiramente para bens pela sua vídeo aula.
Estou com uma dúvida, fiz uma busca em 3 tabelas e na hora que a pessoa começar a digitar preciso que ele mostre tudo referente a palavra digitada, não só o nome como você fez, teria como?

Aguardo resposta.
Obrigado pela atenção
alisson

Parabéns pela video aula, muito boa!!! Gostaria de saber se tem como eu utilizar o mesmo arquivo completar.php para ser usado em 3 campos de busca no mesmo ? ex: busca por nome, por cpf e endereço, os 3 no mesmo , tem como???
Vlw obrigado!!!
Luz

Mateus, tem como você postar os links novamente? Peguei o código do vídeo mas não deu certo!
Obrigada e parabéns pela vídeo aula. Ficou muito boa!
http://www.matheusmoura.com/ Matheus Moura

@LUZ , bem? Desculpa, mas não tenho mais esses arquivos. Faz muito tempo já (23 de outubro de 2009). Já existem melhores formas de fazer. Abraço.
Paulo Henrique

Tá difícil baixar os arquivos da vídeo aula em Matheus…

Obrigado!
Boa Vídeo Aula.
Sbxqah

Muito bom. Num sabia que as classes estavam prontas já do jquery, estava fazendo tudo na mão belo tópico.
Fabianobh Ribeiro

Ola Matheus, tudo bem? Parabéns pela video aula, apesar de ter sido a muito tempo é muito válida!
Poderia por gentileza postar os links? Ou se não tiver mais os arquivos, poderia dizer aonde baixo o arquivo autocomplete.js?

Desde já agradeço!
Grande abraço!