A ver yo a priori veo varios fallos o al menos yo no lo hago así y siempre me funciona.
busqueda.html
En primer lugar, en el archivo (busqueda.html) yo te aconsejaría que lo cambiases por un .php, ya que si trabajas en PHP después tienes más opciones.
En segundo lugar, cuando enviamos un AJAX a través de jQuery con un dato que queremos recibir por medio de POST en el documento al que estamos enviando la información, siempre lo mando a través de un objeto y no en un string, quizás no tenga yo razón, pero tengo entendido que tiene que ser así, al menos a mi siempre me ha funcionado haciéndolo de este modo.
En tercer lugar, la función que haces al hacer clic sobre la div
#display_box ($(document).on("click","#display_box",function()) es un malgasto de recursos ya que lo que haces es llamar al archivo
loadData.php para que te busque en la base de datos un dato que ya extrajiste en el
buscar.php y que ya tienes impreso en pantalla. Ahorrarás recursos en el servidor si lo que haces en esa función es coger esa misma división y la vuelves a imprimir usando jQuery sin tener que hacer otra llamada a AJAX y otra búsqueda en la base de datos. Además puede darse el caso de que el archivo
buscar.php te haya devuelto varias divisiones, en cuyo caso la llamas mal ya que todas te las devuelve con el mismo ID, es mejor que la llames como te la he puesto yo (
$(document).on("click","#display > div",function()) es decir al hacer clic en las divisiones hijas de #display.
Código Javascript
:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Busqueda</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".buscar").keyup(function(){
var cajabusqueda = $(this).val();
var dataString = {
buscarpalabra : cajabusqueda
}
if(cajabusqueda){
$.ajax({
url: "buscar.php",
type: "POST",
data: dataString,
success: function(r){
var o = eval("("+r+")");
if(o.estado == "OK"){
$("#display").html(o.html).show();
}
}
});
}
});
$(document).on("click","#display > div",function(){
var intDiv = $(this).html();
var div = '<div class="display_box" align="left">'+intDiv+'</div>';
$("#display").html(div).show();
});
});
jQuery(function($){
$("#cajabusqueda").Watermark("Buscar");
});
</script>
<style type="text/css">
body
{
font-family:"Lucida Sans";
}
*
{
margin:0px
}
#cajabusqueda
{
width:250px;
padding:3px;
margin-left:250px;
}
#display
{
width:254px;
display:none;
float:right; margin-right:1px;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
}
#display_box
{
padding:7px; border-top:solid 1px #dedede; font-size:12px; height:30px; background:#ECECEC;
}
.display_box:hover
{
background:#3b5998;
color:#FFFFFF;
}
#shade
{
background-color:#00CCFF;
}
</style>
</head>
<body>
<div style=" padding:10px; height:25px; background:#3b5998; background: left no-repeat #3b5998 ">
<div style="width: 250px; float: none; margin-right: 30px">
<input type="text" class="buscar" id="cajabusqueda" /><br />
<div id="display">
</div>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<div style="margin-top:20px; margin-left:20px">
</div>
</body>
</html>
En este archivo, yo siempre que trabajo con AJAX prefiero enviar las respuestas a través de json, ya que esto te permite devover múltiples datos, tantos como quieras y no solo un código HTML, para esto es necesario que leas un poco, si no sabes, sobre las clases en PHP y la programación orientada a objetos.
Segundo: Te he creado en este archivo la clase
obj_response que será la encargada de almacenar en un objeto los datos que le vamos a devolver al busqueda.html a través de AJAX y lo haremos a traves de json para poder enviar más datos. Puedes añadir todos los datos de respuesta que quieras que luegos podrás tratar en la función de jQuery haciendo un eval de una manera muy simple.
Tercero: En este archivo te he hecho varias modificaciones en función de como trabajo yo y siempre me funcionan las cosas. Por alguna razón a mi muchas veces me da error cuando meto muchos datos dentro del bucle while que arroja los diferente resultados de la consulta, así que lo que hago es pasar a arrays los valores devueltos y luego tratar los arrays en otro bucle. En este caso lo que he hecho creo que salta a la vista y si lo pruebas así tu verás como te funciona.
Cuarto: No sé de donde estabas sacando la variable $id que además estabas imprimiendo asi: (<?=$id?>) lo cual ya no está bien. Además en el jQuery intentabas coger este valor de esta forma (
$(this).val()) algo que no te va a servir en un DIV la forma correcto de coger ese atributo en un DIV es esta (
$(this).attr("value")), aunque si te fijas te lo he quitado todo, tanto el atributo id como el atributo value que no te sirven para nada, ya que el ID que tiene que ser un atributo único lo estabas enviando repetido en el caso de que la consulta te diese más de un valor y en el atributo VALUE estabas dando un variable $id que no era nada en absoluto. No sé si por error le estabas poniendo el atributo ID en lugar de CLASS o es que esa DIV no tiene class, en cuyo caso solo tienes que añadirle el class="display_box" como la asignabas en el loaddata.php que hemos eliminado para ahorrar recursos.
Quinto : Tienes que optimizar las consultas MySQL, evita el
SELECT * siempre que no vayas a utilizar todos los datos que te devuelva la consulta. También tienes que evitar en la clausula WHERE el preguntar así (%LO QUE SEA%) ya que esto también como muchos recursos a la hora de hacer consultas, te aconsejo que te mires mejor como utilizar los índices FULLTEXT con los que ahorrarás muchos recursos y te darán mejores resultados que ese tipo de consultas.
Código PHP:
<?php
/* ESTA SERÍA LA CLASE DE RESPUESTA DE AJAX PUEDES CAMBIARLA O AÑADIR LO QUE TU QUIERAS Y LO CORRECTO ES QUE VAYA EN UN ARCHIVO APARTE Y AGREGADA A ESTE ARCHIVO CON UN INCLUDE O REQUIRE_ONCE */
class obj_response {
public $estado;
public $html;
}
include('configuracion.php');
$OBJ_RESPONSE = new obj_response();
$q = $_POST['buscarpalabra'];
$fbnombre = array();
$apellido = array();
$ciudad = array();
$sql_res1=mysql_query("SELECT nombre, nota1, codigo FROM notas WHERE nombre LIKE '%".$q."%' OR nota1 LIKE '%".$q."%' OR nota2 LIKE '%".$q."%')");
while($row=mysql_fetch_array($sql_res1)){
$fbnombre[] = $row['nombre'];
$apellido[] = $row['nota1'];
$ciudad[] = $row['codigo'];
}
$re_fbnombre='<b>'.$q.'</b>';
$re_apellido='<b>'.$q.'</b>';
foreach($fbnombre as $K => $value){
$final_fbnombre = str_ireplace($q, $re_fbnombre, $fbnombre[$K]);
$final_apellido = str_ireplace($q, $re_apellido, $apellido[$K]);
$DIV .= '
<div align="left">
'.$final_fbnombre.' '.$final_apellido.'
<br/>
<span style="font-size:9px; color:#999999">'.$ciudad[$K].'</span>
</div>
';
}
if(!$id[0]){
$OBJ_RESPONSE->estado = "KO";
}else{
$OBJ_RESPONSE->estado = "OK";
$OBJ_RESPONSE->html = $DIV;
}
echo json_encode($OBJ_RESPONSE);
?>
Otra cosa que he visto es que el archivo JQUEY.WATERMARKINPUT.JS no lo tienes incrustado en el busqueda.html pero usas una función de este archivo, puede que sea un error solo al escribir el post, pero si no es así, puede que te esté dando un fallo ahí también.
Como he dicho el archivo loaddata.php no te sirve ya que lo que hemos hecho es crear esa división con los datos que ya teníamos impresos dentro de la <div id="display"> y sustituyéndolo de nuevo con sus propio código sin necesidad de volver a llamar a otro archivo a través de AJAX ahorrando así enviar y recibir datos http y consultas a las bases de datos para extraer información que ya tenemos impresa en pantalla.
Espero que te hay servido de ayuda.