Hace algunos dias empece a aprender y practicar AJAX y he desarrollado un Live Search , que funciona perfecto y me encantaria compartirlo con Ustedes.
Bueno primero y principal dare por sabido (ya que si entraron en AJAX deben tener conocimientos previos de PHP) las conexiones a las bases de datos y la creacion de tablas y campos donde buscar , esto es totalmente libre segun sus necesidades.
Empecemos con el INDEX.HTML
Por cuestiones de tiempo , metere todo lo que no sea HTML dentro de este archivo (Javascript y CSS).
Código:
y por ultimo el archivo buscar.php <!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>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
body{
font-family:"Trebuchet MS";
font-size:12px;
color:#999999;
}
#buscador {
border: 2px solid #00CCFF;
width: 800px;
margin: 0 auto;
padding: 5px;
}
#criterio{
margin:5px;
border:1px solid #00CCFF;
color:#999999;
font-size:14px;
padding: 3px;
width:200px;
}
#label {
color:#000000;
}
font{
margin: 5px;
}
#buscarPor{
float:right;
width:575px;
height:30px;
}
#resultados{
width:800px;
height:auto;
margin-top:20px;
margin: 0 auto;
padding:5px;
}
</style>
<title>Live Search en Ajax</title>
<script type="text/javascript">
//Creamos el objeto XMLHttpRequest
function crearInstancia(){
var aVersions = [ "MSXML2.XMLHttp.5.0",
"MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp","Microsoft.XMLHttp"
];
if (window.XMLHttpRequest){
// para IE7, Mozilla, Safari, etc: que usen el objeto nativo
return new XMLHttpRequest();
}else if (window.ActiveXObject){
// de lo contrario utilizar el control ActiveX para IE5.x y IE6.x
for (var i = 0; i < aVersions.length; i++) {
try {
var oXmlHttp = new ActiveXObject(aVersions[i]);
return oXmlHttp;
}catch (error) {
//no necesitamos hacer nada especial
}
}
}
}
//Enviamos la peticion
function cargarDatos() {
XHR= crearInstancia();
if(XHR){
var url= "buscar.php?criterio="+document.getElementById("criterio").value;
XHR.open("GET",url,true);
XHR.onreadystatechange=cambiaEstado;
XHR.send(null);
}
}
//Mostramos resultados en pantalla
function cambiaEstado() {
/*if(XHR.readyState==1){
document.getElementById("cargando").innerHTML= "<img src='http://i29.tinypic.com/jza49y.gif'>";
}else */ if (XHR.readyState==4){
document.getElementById("resultados").style.display= "";
document.getElementById("resultados").innerHTML= XHR.responseText;
}
}
</script>
</head>
<body>
<div id="buscador">
<label>
<font color="#000000">Ingrese aqui la palabra a Buscar:</font><br />
<input type="text" name="criterio" id="criterio" onkeypress="cargarDatos()" onkeyup="cargarDatos()"/>
</label>
<label> </label>
</div>
<br /><div id="resultados" style="border:2px solid #00CCFF; "></div>
</body>
</html>
que viene a ser el motor de busqueda.
Código PHP:
<?
$buscar= $_GET["criterio"];
//AQUI ARCHIVO DE CONEXION
include("../conectar.php");
$sql = "SELECT * FROM tabla WHERE camp_busqueda like '%$buscar%' ";
$result= mysql_query($sql,$conectar);
$num= mysql_num_rows($result);
if($num==0){
echo "No se han encontrado resultados con el termino <b>$buscar</b>";
}elseif($num>0){
while($row= mysql_fetch_object($result)){
if($num>1){
echo "Se han encontrado $num resultados<br><br>";
}elseif($num==1){
echo "Se ha encontrado $num resultado<br><br>";
}
echo "<b><font color='#666666'> Enviado por <font color=#00CCFF>".$row->autor."</font> el dia <font color=#00CCFF>".$row->fecha."</font></font></b><br>";
echo $row->comentario."<hr>";
}
}
?> Cualquier duda o problema por favor comentenlo.
