Hoy vamos a aprender como hacer una búsqueda instantánea al estilo de Google. En el siguiente código mostramos la forma más básica para conseguir este resultado, vamos a verlo:

Primero creamos el archivo principal, podemos llamarlo como queramo. En este archivo mostraremos la caja de búsqueda y mostraremos los resultados:

HTML

<input type="text" id="busqueda" />
            
<div id="resultado"></div>

jQuery

$(document).ready(function(){
                               
	  var consulta;
			 									 
	   //hacemos focus al campo de búsqueda
	  $("#busqueda").focus();
																   
	  //comprobamos si se pulsa una tecla
	  $("#busqueda").keyup(function(e){
						
	  	  //obtenemos el texto introducido en el campo de búsqueda
	  	  consulta = $("#busqueda").val();
												  
	  	  //hace la búsqueda
													   
	  	  $.ajax({
	  	  	  type: "POST",
	  	  	  url: "buscar.php",
	  	  	  data: "b="+consulta,
	  	  	  dataType: "html",
	  	  	  beforeSend: function(){
	  	  	  	  //imagen de carga
	  	  	  	  $("#resultado").html("<p align='center'><img src='ajax-loader.gif' /></p>");
	  	  	  },
	  	  	  error: function(){
	  	  	  	  alert("error petición ajax");
	  	  	  },
	  	  	  success: function(data){                                                    
	  	  	  	  $("#resultado").empty();
	  	  	  	  $("#resultado").append(data);
										
	  	  	  }
	  	  });
													   
												  
	  });
											
});

Ahora vamos con el archivo «buscar.php«, es el encargado de realizar la búsqueda.

<?php

	$buscar = $_POST['b'];
	
	if(!empty($buscar)) {
		buscar($buscar);
	}
	
	function buscar($b) {
		$con = mysql_connect('localhost','root', 'root');
		mysql_select_db('base_de_datos', $con);
	
		$sql = mysql_query("SELECT * FROM anuncios WHERE nombre LIKE '%".$b."%'",$con);
		
		$contar = mysql_num_rows($sql);
		
		if($contar == 0){
			echo "No se han encontrado resultados para '<b>".$b."</b>'.";
		}else{
			while($row=mysql_fetch_array($sql)){
				$nombre = $row['nombre'];
				$id = $row['id'];
				
				echo $id." - ".$nombre."<br /><br />";	
			}
		}
	}
	
?>

Ver ejemplo

Podéis descargar imágenes de carga para Ajax usando de este generador online:

http://www.ajaxload.info/