auto completar

flavialieggio · Maio 28, 2006

Ola pessoal,

To com um script de auto completar com ajax e php. So que ele faz um auto complemento em uma div abaixo... eu queria que esse auto complemento seja igual ao do Google, onde você vai digitando, aparece uma lista (tipo uma select) abaixo do campo testo e a pessoa pode selecionar aquela sugestao que apareceu com o teclado ou mouse... ah eu acho que vcs sabem como e a do Google, ne!! http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

vou postar o codigo JS e o html... por favor ajudem... nao entendo bem de JS!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

index.html

<html> <head> <title>BUSCA DINÂMICA</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script src="script.js"></script> <script> function pesquisa(valor) { //FUNÇÃO QUE MONTA A URL E CHAMA A FUNÇÃO AJAX url="busca_nome.php?valor="+valor; ajax(url); } </script> </head> <body> <table width="657" border="0" bgcolor="#f7f7f7"> <tr> <td align="center" bgcolor="#CCCCCC"><strong><font color="#FF0000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><- BUSCA DINÂMICA -></font></strong></td> </tr> <tr> <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>DIGITE AQUI O NOME DA PESSOA</strong></font>: <!-- NOTE Q A CADA TECLA PRESSIONADA É CHAMADA A FUNÇÃO PESQUISA PASSANDO O QUE O USUARIO TEM DIGITADO ATÉ O MOMENTO --> <input type="text" name="nome" onKeyPress="pesquisa(this.value)"></td> </tr> <tr> <td> <!-- AQUI SERÁ APRESENTADO O RESULTADO DA BUSCA DINÂMICA.. OU SEJA OS NOMES --> <div id="pagina"></div></td> </tr> </table> </body> </html>

script.js

// JavaScript Document // FUNÇÃO RESPONSÁVEL DE CONECTAR A UMA PAGINA EXTERNA NO NOSSO CASO A BUSCA_NOME.PHP // E RETORNAR OS RESULTADOS function ajax(url) { //alert(nick); //alert(dest); //alert(msg); req = null; // Procura por um objeto nativo (Mozilla/Safari) if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req.onreadystatechange = processReqChange; req.open("GET",url,true); req.send(null); // Procura por uma versão ActiveX (IE) } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processReqChange; req.open("GET",url,true); req.send(); } } } function processReqChange() { // apenas quando o estado for "completado" if (req.readyState == 4) { // apenas se o servidor retornar "OK" if (req.status ==200) { // procura pela div id="pagina" e insere o conteudo // retornado nela, como texto HTML document.getElementById('pagina').innerHTML = req.responseText; } else { alert("Houve um problema ao obter os dados:n" + req.statusText); } } }

[]´s

Flávia

flavialieggio · Maio 29, 2006

bom dia galerinha,No codigo acima que postei o que sera que tenho que fazer?? Preciso urgente da ajuda de voces!!!![]´sFlávia

micox · Maio 29, 2006

Estou trabalhando na sua solução...

Já posto.

Editado:----

Pronto:

Deixa seu html (a parte sem script) assim:

<style>* { padding:0; margin:0;}#tudo {  width:650px;  background-color:#f7f7f7;  font-size:10px;    font-weight: bold;  font-family: Verdana, Arial, Helvetica, sans-serif;}h2 {  font-size:10px;    color:#FF0000;  text-align:center;  background-color:#CCCCCC;}label {  cursor:pointer;}#nome {  width:150px;}#pagina {  position:absolute; /* isso aqui tem que ficar */  border:1px solid green;  height:120px;  visibility:hidden;}</style><body><div id="tudo"><h2><- BUSCA DINÂMICA -></h2><label for="nome">DIGITE AQUI O NOME DA PESSOA:</label><input type="text" id="nome" name="nome" onkeypress="pesquisa(this.value)"><div id="pagina"> </div></div> <!-- fim da div tudo -->

E seu código que preenche o auto completar voce adiciona o seguinte:

function pega(quem){ return document.getElementById(quem);}//adiciona isso aqui:pega("pagina").style.width = pega("nome").offsetWidth;pega("pagina").style.left = pega("nome").offsetLeft + "px";pega("pagina").style.top = (pega("nome").offsetTop + pega("nome").offsetHeight) + "px";pega("pagina").style.visibility="visible;"

Ficará dentro do status=200. Ficará mais ou menos assim:

if (req.status ==200) {// procura pela div id="pagina" e insere o conteudo// retornado nela, como texto HTMLdocument.getElementById('pagina').innerHTML = req.responseText;pega("pagina").style.width = pega("nome").offsetWidth;pega("pagina").style.left = pega("nome").offsetLeft + "px";pega("pagina").style.top = (pega("nome").offsetTop + pega("nome").offsetHeight) + "px";pega("pagina").style.visibility="visible;"}

Testa ae...

PS.: Se quiser saber mais sobre a limpeza que fiz no seu html leia isso e dê uma passadinha no fórum de webstandards.

Té mais...

flavialieggio · Maio 29, 2006

Ola micox,

Ve se eu entendi... eu nao compreendi muito bem.. o codigo editado ficou assim:

index1.html

<html> <head> <title>BUSCA DINÂMICA</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script src="script1.js"></script> <script> function pesquisa(valor) { //FUNÇÃO QUE MONTA A URL E CHAMA A FUNÇÃO AJAX url="busca_nome.php?valor="+valor; ajax(url); }</script><style>* { padding:0; margin:0;}#tudo {  width:650px;  background-color:#f7f7f7;  font-size:10px;    font-weight: bold;  font-family: Verdana, Arial, Helvetica, sans-serif;}h2 {  font-size:10px;    color:#FF0000;  text-align:center;  background-color:#CCCCCC;}label {  cursor:pointer;}#nome {  width:150px;}#pagina {  position:absolute; /* isso aqui tem que ficar */  border:1px solid green;  height:120px;  visibility:hidden;}</style></head> <body><div id="tudo"><h2><- BUSCA DINÂMICA -></h2><label for="nome">DIGITE AQUI O NOME DA PESSOA:</label><input type="text" id="nome" name="nome" onkeypress="pesquisa(this.value)"><div id="pagina"> </div></div> <!-- fim da div tudo --></body> </html>

scrtipt.js

// JavaScript Document // FUNÇÃO RESPONSÁVEL DE CONECTAR A UMA PAGINA EXTERNA NO NOSSO CASO A BUSCA_NOME.PHP // E RETORNAR OS RESULTADOS function ajax(url) { //alert(nick); //alert(dest); //alert(msg); req = null; // Procura por um objeto nativo (Mozilla/Safari) if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req.onreadystatechange = processReqChange; req.open("GET",url,true); req.send(null); // Procura por uma versão ActiveX (IE) } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processReqChange; req.open("GET",url,true); req.send(); } } } function processReqChange() { // apenas quando o estado for "completado" if (req.readyState == 4) { // apenas se o servidor retornar "OK" if (req.status ==200) {// procura pela div id="pagina" e insere o conteudo// retornado nela, como texto HTMLdocument.getElementById('pagina').innerHTML = req.responseText;pega("pagina").style.width = pega("nome").offsetWidth;pega("pagina").style.left = pega("nome").offsetLeft + "px";pega("pagina").style.top = (pega("nome").offsetTop + pega("nome").offsetHeight) + "px";pega("pagina").style.visibility="visible;"}else { alert("Houve um problema ao obter os dados:n" + req.statusText); } } }

ta certo??? se for assim, nao apareceu nada.... :wacko:

micox · Maio 29, 2006

Ah. sim...Veja que eu uso a função pega() para não ter que ficar digitando document.getElementById toooooda vez...Faltou voce colocar ela no seu script.jsfunction pega(quem){ return document.getElementById(quem);}Coloca ela lá no início, antes da função ajax().Ah. e baixe o firefox que ele te avisa exatamente onde tá o erro através do Console de erros.

flavialieggio · Maio 29, 2006

Ola micox,Valeu mais uma vez pela ajuda!! so que como e que eu faço pro pessoal poder selecionar uma dos opção que aparece na div???Na versao do IE 7.0 acusa esse erro:"Could not get the visibility propertu. Invalid argument"line:51char:1Ah, eu tenho o firefox :).. valeu pela dicaNo firefoz nao acusa erro mas a div sai estourada.....

flavialieggio · Maio 29, 2006

Micox,O que eu to qurendo e parecido com a pesquisa google que tem no seu site!!! você qdo digita uma primeira letra, aparece uma lista de opções abaixo onde eu posso escolher uma dessas opções!!!como e que você fez isso??? tem como so adptar o que a gente ja fez??

flavialieggio · Maio 29, 2006

Achie em uma pesquisa que tava fazendo um exemplo assim:no campo text da index.html ele coloca assim: <div id="contenedor"> <input type="text" id="input_2" class="inputs" onfocus="if(document.getElementById('lista').childNodes[0]!=null && this.value!='') { filtraLista(this.value); formateaLista(this.value); reiniciaSeleccion(); document.getElementById('lista').style.display='block'; }" onblur="if(v==1) document.getElementById('lista').style.display='none';" onkeyup="if(navegaTeclado(event)==1) { clearTimeout(ultimoIdentificador); ultimoIdentificador=setTimeout('rellenaLista()', 1000); }"> <div id="lista" onmouseout="v=1;" onmouseover="v=0;"></div> </div>sera que seria algo do tipo que eu teria q adptar naquele codigo anterior???

micox · Maio 29, 2006

Opa opa opa...

Perae...

Voce tá querendo um que nem "eu fiz" em http://elmicox.blogspot.com ?????

Seus problemas acabaram!!!!

Não fui eu que fiz... Aquilo lá é uma busca do google.

Se voce quer daquela forma, é só voce criar um input com o mesmo nome do input do google (que se chama "q").

Assim, todas as pesquisas que voce já fez um dia no google serão trazidas pelo browser (e não pelo meu código javascript).

Se do jeito que tá no meu blog te satisfez então é só voce fazer seu input text da seguinte forma:

Prontim..

Era isso que você queria? Se não for postae pragente continuar a "guerra"

flavialieggio · Maio 29, 2006

E ai micox!!!

Olha nao e exatamente a pesquisa do google e sim a forma... veja bem, no codigo que postei eu faço uma consulta dos nomes de proprietarios, entao qdo a pessoa vai digitando o noma que ela quer consultar, eu queria que aparecesse uma lista de sugestao dos nomes onde ela pode escolher uma dessas sugestoes...ta confuso??? :huh:

E parecido com a pesquisa do google que ta no seu site...

Acho que vamos ter que continuar a guerra.... http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

flavialieggio · Maio 30, 2006

Bom dia galera.....Bom de acordo com o codigo acima, sera que alguem poderia me orientar a montar essa busca dinamica???so queria saber se para o usuario alem de ter a lista de opções no auto complemento como fazer para que ele possa escolher uma dessas opções..??!!??.... :rolleyes: []´sFlávia

micox · Maio 30, 2006

Ola micox,Valeu mais uma vez pela ajuda!! so que como e que eu faço pro pessoal poder selecionar uma dos opção que aparece na div???Na versao do IE 7.0 acusa esse erro:"Could not get the visibility propertu. Invalid argument"line:51char:1Ah, eu tenho o firefox smile.gif.. valeu pela dicaNo firefoz nao acusa erro mas a div sai estourada.....

Voce conseguiu algum progresso depois desse post que eu copiei aí? ou ainda tá dando o erro do visibility?

flavialieggio · Maio 30, 2006

Ola micoxAchei que tinha esquecido do topico!! :)Olha, na verdade nao muito...esse erro bate na linha onde fecha a div tudo!!! nao entendo o porque do erroAparentemente ele parece nao estar aceitando uma div dentro da outra.... nao sei bem...Na verdade to odiando essa versao 7 do IE!!! desconfigura quase tudo

flavialieggio · Maio 30, 2006

No firefox esse codigo retorna uma lista abaixo do text mostrando as opções , porem nao me permite escolher uma dessas opções... Ja no IE ele retorna aquele erro....

micox · Maio 30, 2006

Ahnnnn sim... Voce tava testando no IE7. FAz isso não. Projeta sempre no firefox (que exibirá seus erros) e depois testa no IE 6.

No firefox esse codigo retorna uma lista abaixo do text mostrando as opções , porem nao me permite escolher uma dessas opções...

Certo. Quanto a isso agente terá que fazer o seguinte: Em vez de jogar o resultado em uma div, talvez ficará mais fácil agente jogar o resultado em um select multilinha.Daí depois do onselect ou onclick do usuário (eu prefiro o onselect) voce pega o value do select e joga no input text.

flavialieggio · Maio 30, 2006

kkkkk esse IE 7 e um saquinho.....beleza, entaoo tenho que montar um select multilinha. e no onselect eu vou colocar pesquisa(this.value), certo??!!??

micox · Maio 31, 2006

Não. O pesquisa() vai continuar no onchange do input text.Depois que o pesquisa executar, ele vai mostrar o select, certo?Daí então DEPOOIS que o cara selecionar a opção que ele quer do select aí voce vai transferir esta opção mudando o value do input text pra pegar o value do select. Algo mais ou menos assim:onselect="seu_input_text.value=this.value"Acho que é isso, tentae...

flavialieggio · Maio 31, 2006

ta meio confuso, mas vou fazer aqui e posto

flavialieggio · Maio 31, 2006

Micox,

Seria algo assim, ou eu to montando errado??

<body><div id="tudo"><h2><- BUSCA DINÂMICA -></h2><label for="nome">DIGITE AQUI O NOME DA PESSOA:</label><input type="text" id="nome" name="nome" onkeypress="pesquisa(this.value)"><select multiple name="pagina" onselect="nome.value=this.value"></select></div></body> </html>

se for assim, nao ta dando certo... :(

micox · Maio 31, 2006

Exatamente.

Só não tá dando certo porque o onselect que eu falei não existe. Dei uma pesquisada e o certo é usar o onchange no select mesmo.

Outra coisa: Tire o multiple, pra exibir muitas linhas voce usa o size.

Outra coisa: referencie os objetos usando document.getElementById

Ficará algo como:

<input type="text" id="nome" name="nome" onkeypress="pesquisa(this.value)"><select name="pagina" onchange="document.getElementById('nome').value=this.value" size="4"><!-- os options que serão carregados pelo ajax ficarão aqui --></select>

Arquivado

auto completar

Recommended Posts

flavialieggio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

flavialieggio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

flavialieggio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

flavialieggio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

flavialieggio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

flavialieggio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

flavialieggio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

flavialieggio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

flavialieggio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

flavialieggio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

flavialieggio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

flavialieggio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

flavialieggio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2