auto completar
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
Discussão (71)
Carregando comentários...