Como listar os dados retornados de busca (AJAX)?
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");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.
Discussão (1)
Carregando comentários...