Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

flavialieggio

auto completar

Por , em Javascript

Recommended Posts

flavialieggio    0

flavialieggio
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

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...

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

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:

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

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.....

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

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??

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

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???

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

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:

 

<input maxlength="2048" size="55" name="q" value="" title="Pesquisa Google">

 

Prontim..

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

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....

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

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??!!??

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

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...

Compartilhar este post

Link para o post
Compartilhar em outros sites

flavialieggio    0

flavialieggio
Postado

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... :(

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito