Hola Estoy desarrollando un sitio web en donde uso un buscador
Parecido a facebook el cual me despliegua resultados en relacion a lo que busque.
aqui Les dejo al direccion de el buscador.
http://quieroshow.com.mx/qsearch/
Cuando ingresan ej. Lalo
Les Desplegara algunos resultados, mi problema es que quiero que cuando de clic en algun otro espacio de la web, se oculten los resultados o por ejemplo escribi lalo , me despliega los resultados y cuando borro Lalo que se oculten lo resultados y despliegue nuevos en caso de colocar nueva busqueda,
Aqui les Dejos los Codigos.
INDEX.PHP
Código HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>QuieroShow.Com</title>
<style type="text/css">
#caja_busqueda /*estilos para la caja principal de busqueda*/
{
width:755px;
height:72px;
border:solid 0px #979DAE;
background-color: #f4f4f4;
font-size:44px;
color: #595959;
outline:0;
}
#display /*estilos para la caja principal en donde se puestran los resultados de la busqueda en forma de lista*/
{
width:755px;
display:none;
overflow:hidden;
z-index:10;
border: solid 0px #dfdfe0;
background-color: #f4f4f4;
font-family: sans-serif;
color: #f93b05;
}
.display_box /*estilos para cada caja unitaria de cada usuario que se muestra*/
{
padding:2px;
padding-left:6px;
font-family: sans-serif;
font-size:18px;
height:63px;
text-decoration:none;
color:#e72e00;
}
.display_box:hover /*estilos para cada caja unitaria de cada usuario que se muestra. cuando el mause se pocisiona sobre el area*/
{
background: #ebebeb;
color: #e72e00;
}
.desc
{
color:#1a1a1a;
font-size:16;
}
.desc:hover
{
color:#e72e00;
}
/* Easy Tooltip */
</style>
<script language="JavaScript" src="jquery-1.5.1.min.js"></script>
<script language="JavaScript" src="jquery.watermarkinput.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".busca").keyup(function() //se crea la funcioin keyup
{
var texto = $(this).val();//se recupera el valor de la caja de texto y se guarda en la variable texto
var dataString = 'palabra='+ texto;//se guarda en una variable nueva para posteriormente pasarla a search.php
if(texto=='')//si no tiene ningun valor la caja de texto no realiza ninguna accion
{
}
else
{
$.ajax({//metodo ajax
type: "POST",//aqui puede ser get o post
url: "search.php",//la url adonde se va a mandar la cadena a buscar
data: dataString,
cache: false,
success: function(html)//funcion que se activa al recibir un dato
{
$("#display").html(html).show();// funcion jquery que muestra el div con identificador display, como formato html, tambien puede ser .text
}
});
}return false;
});
});
jQuery(function($){//funcion jquery que muestra el mensaje "Buscar Show..." en la caja de texto
$("#caja_busqueda").Watermark("Buscar Show...");
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>
</head>
<body bgcolor="#1A1A1A" >
<table border="0" width="971" height="133" cellspacing="0" cellpadding="0" background="fondo.png">
<!-- MSTableType="nolayout" -->
<tr>
<td width="933">
<div style="position: absolute; width: 628px; height: 100px; z-index: 1; left: 52px; top: 40px" id="capa1">
<form action="usuario_completo.php" method="get" autocomplete="off">
<div style=" width:250px; padding-left:3px; " >
<input type="text" class="busca" id="caja_busqueda" name="clave" /><br />
</div>
<div id="display"></div>
</form></div>
<p></td>
</tr>
</table>
</body>
</html> search.PHP
Código HTML:
<?php
include('clase_conexion.php');
if($_POST)
{
$q=$_POST['palabra'];//se recibe la cadena que queremos buscar
$sql_res=mysql_query("select * from face where nombre like '%$q%' or direccion like '%$q%'" ,$c);
while($row=mysql_fetch_array($sql_res))
{
$id=$row['id'];
$nombre=$row['nombre'];
$direc=$row['direccion'];
$foto=$row['url'];
$url=$row['url2'];
?>
<a href="/qsearch/<?php echo $url; ?>" style="text-decoration:none;" >
<div class="display_box" align="left">
<div style="float:left; margin-right:6px;"><img src="<?php echo $foto?>" width="60" height="60" /></div>
<div style="margin-right:6px;"><b><?php echo $nombre; ?></b></div>
<div style="margin-right:6px; font-size:14px;" class="desc"><?php echo $direc; ?></div>
</div>
</a>
<?php
}
}
else
{
}
?> Espero me puedan ayudar que he intentado varias cosas pero no puedo hacer que me oculte resultados cuando despues de escribir , borro y se oculte.