Ir para conteúdo

POWERED BY:

Arquivado

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

SinoP

Como listar os dados retornados de busca (AJAX)?

Por , em Javascript

Recommended Posts

SinoP    0

SinoP
Postado

Bom dia.

Estou com o seguinte problema:

Tenho um campo "text" em um formulário, e estou usando um sistema de sugestão.

Consigo fazer a busca com AJAX e retornar em uma div, até ai ta filé.

Mas só consigo selecionar uma destas sugestões com o click do mouse, não consigo navegar nos resultados com as setas (cima) e (baixo).

A seguir vou colocar o código:

 

Página que contém o formulário:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>produtos</title>
<link href="css/submenu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style3 {
	font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma;
	font-size: 13px;
}
.style5 {
	color: #666666;
	font-weight: bold;
}
-->
</style>
<script type="text/javascript">
var http = false;
var https = false;

function referencias(ref) {
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}
http.open("GET", "referencias.php?ref=" + ref, true);
http.onreadystatechange=function() {
var tamanhonome = document.form1.ref.value.length;
if(http.readyState == 4) {
	if(http.responseText=='' || tamanhonome<=0){
		document.getElementById('labelRef').style.display='none';
	} else {
		document.getElementById('labelRef').style.display='block';
        document.getElementById('labelRef').innerHTML = http.responseText;
	}
}
}
http.send(null);
}

</script>
</head>

<body>
<div style="float:left; width:100%; margin-bottom:18px; text-align:center;">
<form name="form1" id="form1" action="busca_produtos.php" method="post">
<table width="284" border="1" bordercolor="#CCCCCC" style="margin:0px auto;">
  <tr>
    <td colspan="2" bgcolor="#CCCCCC" bordercolor="#CCCCCC"><strong>Buscar produtos</strong></td>
    </tr>
  <tr>
    <td width="55" align="right" bgcolor="#EBEBEB">REF:</td>
    <td width="251" align="left" bgcolor="#EBEBEB"><input type="text" id="ref" name="ref" size="30" onKeyUp="referencias(this.value)" class="style8" /><br /><span id="labelRef" style="position:absolute; margin-top:0px; margin-left:0px; background-color:#FFF; border:#666 solid 1px; padding-left:2px; padding-right:2px; display:none;"></span></td>
  </tr>
  <tr>
    <td colspan="2" align="center" bordercolor="#FFFFFF"><input type="submit" value="Buscar" name="Buscar" border="0" /></td>
    </tr>
</table>
</form>
</div>
</body>
</html>

 

 

Página que faz a busca e exibe com o AJAX:

<?php
/*
Estou usando um banco MYSQL…
*/
function referenci($refer) {

//crie a sua conexão php ao seu banco, usei uma conexao pronta que possuo
require_once("conecta.php");
/*
criei uma tabela “produtos” e uma coluna “ref”. Daí você insere uns numeros lá para utilizar aqui. Então, faz um Select procurando por referencias que contenham o que foi digitado lá no formulário pelo usuário. Sobre o “like” do SQL , ele significa: com o termo, e as porcentagens descartam início e fim deste trecho, podendo ele estar no meio de uma palavra.
*/
$sql = "SELECT DISTINCT(ref) FROM produtos WHERE ref LIKE '%".$refer."%'" ;

$qry = mysql_query($sql); //faz a consulta...
$num = mysql_num_rows($qry); //traz o número de linhas retornadas
while($linha = mysql_fetch_array($qry)){ //joga o conjunto de resultados numa variável
/*
Se a referencia encontrada for diferente da digitada exibe para o usuário, se for identica não é necessário exibila.
*/
if($linha['ref']!=$refer){
$retorno .= '<a href="javascript:void(0);" onmouseover="this.style.backgroundColor=?#EBEBEB?;" onmouseout="this.style.backgroundColor=?#FFFFFF?;" onclick="document.getElementById(?ref?).value=?'.$linha['ref'].'?; document.getElementById(?labelRef?).style.display=?none?;" style="text-decoration:none; color:#000;">'.$linha['ref'].'</a><br />';
}
}
//Tratando a variavel para que o JS funcione quando exibido
//Substituo os ? por ' aspas simples para que o código fique identico a um HTML puro
if($refer!="" || $num!=0 || strlen($refer)>1){
echo str_replace("?", "'", $retorno);
}

}

echo referenci($_REQUEST['ref']);
?>

Vlw galera.

Compartilhar este post

Link para o post
Compartilhar em outros sites

SinoP    0

SinoP
Postado

Galera... acho que não me expressei bem.

Eu consigo fazer as sugestões aparecerem na tela do usuário, igual as sugestões do "google".

Porém no "google" se voce aperta seta pra baixo, consegue navegar nos resultados com as setas (cima) e (baixo), só preciso saber como ativar a navegação com as setas.

Tipo: usando <li> (linhas) ou usando (tabela), preciso de uma luz... já tentei de tudo e não consegui.

Vlw

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