Jefferson Fernandes Postado Agosto 28, 2008 Denunciar Share Postado Agosto 28, 2008 Pessoal, tenho um script de busca em ajax que pega os dados do banco de dados, eu gostaria que quando aparecesse o resultado dessa busca abaixo do input, os resultados quando clicados preenchesse o campo input.Segue o código abaixo:PÁGINA “INDEX.PHP”<html><head><title>Busca Dinamica</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script src="script.js"></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 Dinamica -></font></strong></td></tr><tr><td><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>Digite aki o nome do cliente</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" onKeyUp="carregaAjax('pagina', 'busca_nome.php?valor=' + this.value)" onKeyDown="carregaAjax('pagina', 'busca_nome.php?valor=' + 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>PÁGINA “SCRIPT.JS”function openAjax() {var Ajax;try {Ajax = new XMLHttpRequest(); // XMLHttpRequest para browsers mais populares, como: Firefox, Safari, dentre outros.}catch(ee){try {Ajax = new ActiveXObject("Msxml2.XMLHTTP"); // Para o IE da MS}catch(e){try {Ajax = new ActiveXObject("Microsoft.XMLHTTP"); // Para o IE da MS}catch(e){Ajax = false;}}}return Ajax;} function carregaAjax(div, getURL) {document.getElementById(div).style.display = "block";if(document.getElementById) { // Para os browsers complacentes com o DOM W3C.var exibeResultado = document.getElementById(div); // div que exibirá o resultado.var Ajax = openAjax(); // Inicia o Ajax.Ajax.open("GET", getURL, true); // fazendo a requisiçãoAjax.onreadystatechange = function(){if(Ajax.readyState == 1) { // Quando estiver carregando, exibe: carregando...exibeResultado.innerHTML = "<div>Carregando</div>";}if(Ajax.readyState == 4) { // Quando estiver tudo pronto.if(Ajax.status == 200) {var resultado = Ajax.responseText; // Coloca o retornado pelo Ajax nessa variávelresultado = resultado.replace(/\+/g,""); // Resolve o problema dos acentos //resultado = resultado.replace(/ã/g,"a");resultado = unescape(resultado); // Resolve o problema dos acentosexibeResultado.innerHTML = resultado;} else {exibeResultado.innerHTML = "Por favor, tente novamente!";}}}Ajax.send(null); // submete}}PÁGINA “BUSCA_NOME.PHP”<?phpif(!empty($_GET["valor"])){// O campo valor conterá o que o usuário digitou até o momento//Conecta ao banco, colocar parametros ip, usuario, senha$conexao=mysql_connect("localhost","root","");//Seleciona o banco de dados que vai usarmysql_select_db("teste");// Executa a instrução SELECT passando o que o usuário digitou$sql="select * from cliente where nome like '$_GET[valor]%'";$resultado=mysql_query($sql) or die (mysql_error());//Verifica a quantidade de registros retornados$linhas=mysql_num_rows($resultado);if($linhas>0){// Executa um LOOP para mostrar os nomes das pessoas// Vale lembrar que todos esses resultados serao mostrados dentro da pagina index.html dentro da DIV paginawhile($pegar=mysql_fetch_array($resultado))echo "$pegar[nome] <br />";}}?>Agradeço desde já, to precisando muito dessa modificação. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 ESerra Postado Agosto 28, 2008 Denunciar Share Postado Agosto 28, 2008 Movendo PHP » AJAX. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 fercosmig Postado Outubro 21, 2008 Denunciar Share Postado Outubro 21, 2008 olha um exemplo em asp, funcionando no IE e FFteste_ajax.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Teste Ajax</title> <script language="javascript" type="text/javascript"> <!-- var xmlHttp /* Instância */ function GetXmlHttpObject(){ var objXMLHttp=null; if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest(); }else if (window.ActiveXObject){ objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP"); } return objXMLHttp } /* Essa função manda a ID selecionada para a página que ir filtrar os tipos */ function busca(LocRet,Valor){ LocalRetorno = LocRet; xmlHttp=GetXmlHttpObject(); if (xmlHttp==null){ alert ("Este browser no suporta HTTP Request"); return; } url = 'teste_ajax_busca.asp'; url=url+"?vl="+Valor; xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } /* Essa função irá exibir o resultado na DIV */ function stateChanged(){ if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ document.getElementById(LocalRetorno).innerHTML=xmlHttp.responseText; } } function Muda(id){ if(document.getElementById(id).className == 'normal'){ document.getElementById(id).className= 'mouse'; }else{ document.getElementById(id).className = 'normal'; } } function Preenche(valor){ document.getElementById('txtnome').value = valor; } --> </script> <style type="text/css" media="screen"> .autocompletar{ border-color:#000099; border-style:solid; border-width:1px; background-color:#66FFFF; font-family:verdana; font-weight:bolder; font-size:12px; color:#003399; width:300px; height:auto; } .normal{ background-color:#66FFFF; font-family:verdana; font-weight:bolder; font-size:12px; color:#003399; cursor:pointer; } .mouse{ background-color:#000066; font-family:verdana; font-weight:bolder; font-size:12px; color:#FFFFFF; cursor:pointer; } </style> </head> <body> <form name="frm1" id="frm1" method="post"> <input type="text" name="txtnome" id="txtnome" onKeyDown="java script: busca('autocompletar',this.value);" onKeyUp="java script: busca('autocompletar',this.value);"/> <input type="submit" /> </form> <div id="autocompletar" class="autocompletar"></div> </body> </html> teste_ajax_busca.asp Response.Charset = "ISO-8859-1" Dim strConn, objConn, objRs, vSql, vTexto, cont strConn = "Provider=SQLOLEDB;" strConn = strConn & "Server=???;Database=???;" strConn = strConn & "UID=???;PWD=???;" Set objConn = Server.CreateObject("ADODB.Connection") objConn.Open StrConn Set objRs = Server.CreateObject("ADODB.Recordset") vTexto = Request.QueryString("vl") If (vTexto <> "") Then vSql = "SELECT nome FROM tabela WHERE nome LIKE '" & vTexto & "%' ORDER BY nome ASC" objRs.Open vSql,objConn,3,3 If (NOT objRs.BOF) AND (NOT objRs.EOF) Then objRs.MoveFirst cont = 0 Do While NOT objRs.EOF %> <span id="a<%=cont%>a" class="normal" onMouseOver="java script:Muda(this.id);" onMouseOut="java script:Muda(this.id);" onClick="java script:Preenche('<%=objRs("nome")%>')"><%=objRs("nome")%></span><br /> <% cont = cont + 1 objRs.MoveNext Loop End If End If Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
Jefferson Fernandes
Pessoal, tenho um script de busca em ajax que pega os dados do banco de dados, eu gostaria que quando aparecesse o resultado dessa busca abaixo do input, os resultados quando clicados preenchesse o campo input.
Segue o código abaixo:
PÁGINA “INDEX.PHP”
PÁGINA “SCRIPT.JS”PÁGINA “BUSCA_NOME.PHP”
Agradeço desde já, to precisando muito dessa modificação.
Link para o comentário
Compartilhar em outros sites
2 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.