Buscador con ajax php y mysql avanzado

Buscador con ajax php y mysql avanzado

Hola amigos, en esta ocacion vamos a empezar con un pequeño tutorial sobre como crear un buscador con ajax utilizando php y mysql, este buscador tendra una sierta similitud al buscador de google ya que buscara en la base de datos todo aquello que tenga algo en comun con el termino que estamos buscando y lo mejor de todo pordra ir mostrandonos resultados en tiempo real sobre lo que estamos buscando.

Para este tutorial vamos a reutilizar el codigo del tutorial anterior sobre como crear un buscador de palabras con php y mysql 

Ver el buscador en funcionamiento.

Crear nuestro propio buscador con ajax y mysql

Al momento de crear nuestro sitio web una de las principales cosas que tenemos que realizar es crear un buscador que les permita a los usuarios realizar búsquedas en nuestro sitio web, el inconveniente surge cuando realizamos un formulario de búsqueda, el usuario realiza una búsqueda y para poder ver los resultados tiene que recargarse la página completa.

Por eso es que vamos a realizar este pequeño tutorial de como hacer un buscador con ajax php y mysql, será algo simple pero funcionar que puedes mejorarlo y hacer algo mucho mas avanzado.

Bueno para empezar lo primero que vamos a ir es a nuestro editor de texto y crear 6 archivos con los siguientes nombres.

index.php
style.css
ajax.js
config.php
resultado.php
titulos.php

Se que tienes que estar preguntándote y ¿Porque tantos archivos para un simple buscador con ajax? Ahora te explico porque, lo primero es que todo esto se puede hacer en 1 o 2 archivos pero seria algo muy desordenado por eso es mucho mejor y mas aconsejable que dividas cada codigo en un archivo diferente. Si te fijas tenemos un archivo ajax.js y 4 archivos php, cada uno tiene una función diferente ahora bien en caso de los archivos php teníamos la posibilidad de crearlo en un solo archivo pero es mas ordenado hacerlo en archivos separados por las ventajas que ofrece esta forma

El motivo por el cual he creado los 3 archivos es como les dije antes, todo esto es para separar el código y las funciones que realizan cada uno de nuestro buscador con ajax ya que estamos creando un buscador y por ende no queremos que nuestro buscador este funcionando de una manera lenta.

Bueno lo primero que vamos a crear es nuestro index.php y nuestro archivo style.css copia todo tal cual lo coloco aqui y luego que compruebes que funciona entonces puedes hacerle las modificaciones que desee.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ES">
<head>
<script src="ajax.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Buscador avanazado con php y mysql</title>
</head>
<body>
<div id="contenedor">
<div id="formulario">
<h1>Mi Buscador...</h1>
<form name="form1" action="index.php" autocomplete="off" form="null">
<input type="search" name="buscar" id="buscar" placeholder="Buscar..." onKeyUp="if(tecla(event) == true) { alert(this.value); }"/> <input type="button" value="Busqueda avanzada" id="button" onClick="datos()" />
<div id="sugerencias">
</div>
</form>
</div>
<div id="resultados">
<?php
error_reporting(E_ALL ^ E_NOTICE);
include('conexion.php');
$palabra = $_GET['buscar'];
if($palabra == ''){
echo 'Escribe una palabra...';
}else{
$query = "SELECT * , MATCH (titulo,ntexto) AGAINST ('$palabra') AS puntuacion FROM registro WHERE MATCH (titulo, ntexto) AGAINST ('$palabra') ORDER BY puntuacion DESC LIMIT 50";//"SELECT registro_id, titulo, ntexto FROM registro where ntexto like '".$palabra."%'";
$respuesta = mysql_query ($query) or die(mysql_error());
if (mysql_fetch_assoc ($respuesta)<=0) {
echo "Ningun resultado relacionado con <b> ".$palabra.'<b>';
}else {
$respuesta = mysql_query ($query) or die(mysql_error());
while($row = mysql_fetch_array($respuesta))
{

echo '<p>';
echo '<div id="vista"><b>';

}
}mysql_free_result($respuesta);
}
?>
</div>
</div>
</body>
</html>

Ahora colocamos el codigo para nuestro archivo style.css que es el que le dará la forma a nuestro documento del formulario donde aparecerá nuestro buscador con ajax y php.

*{
margin:0px;
padding:0px;
background:#CCC;
}#formulario,#resultados{
text-align:left;
width:800px;
margin:10px auto;
}
#resultados{
border-left:solid 1px #dadada;
-moz-box-shadow:0 0 10px #dadada inset;
box-shadow:0 0 10px #dadada inset;
-ms-box-shadow:0 0 10px #dadada inset;
-webkit-box-shadow:0 0 10px #dadada inset;
-o-box-shadow:0 0 10px #dadada inset;
}
#buscar,#sugerencias{
width:400px;
padding:10px;
border: solid 1px #CCC;
padding-left:5px;
padding-right:5px;
box-shadow:0 0 5px #CCC inset;
-moz-box-shadow:0 0 5px #CCC inset;
-ms-box-shadow:0 0 5px #CCC inset;
-o-box-shadow:0 0 5px #CCC inset;
-webkit-box-shadow:0 0 5px #CCC inset;
}
#button{
width:150px;
padding:10px;
background:#f9f9f9;
border:solid 1px #CCC;
color:#06C;

}
#button:hover{
background:-moz-linear-gradient(#f5f5f5 0%, #f9f9f9);
background:-ms-linear-gradient(#f5f5f5 0%, #f9f9f9);
background:-webkit-linear-gradient(#f5f5f5 0%, #f9f9f9);
background:-o-linear-gradient(#f5f5f5 0%, #f9f9f9);
background:linear-gradient(#f5f5f5 0%, #f9f9f9);
color:#F63;
}
#sugerencias
{
box-shadow:none;
margin-top:0px;
height:auto;
padding:5px;
text-align:left;
color:#06F;
border-top:none;
float:inherit;
display:none;
}
#vista{
border-bottom:solid 1px #dadada inset;
-moz-border-bottom:solid 1px #dadada inset;
-ms-border-bottom:solid 1px #dadada inset;
-webkit-border-bottom:solid 1px #dadada inset;
-o-border-bottom:solid 1px #dadada inset;
margin:0px;
padding:5px;

}#vista:hover{
background:-moz-linear-gradient(#f6f6f6 0%, #f9f9f9 100%);
background:-webkit-linear-gradient(#f6f6f6 0%, #f9f9f9 100%);
background:-ms-linear-gradient(#f6f6f6 0%, #f9f9f9 100%);
background:-o-linear-gradient(#f6f6f6 0%, #f9f9f9 100%);

cursor:pointer;
}
#publicidad{
position:fixed;
left:0px;
right:0px;
border:solid 1px #dadada;
bottom:0px;
padding:5px;

}

Ahora sigue nuestro archivos resultados.php el cual en nuestro buscador con ajax se encargará de mostrarnos los detalles en caso del usuario darle clic a uno de los resultados.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ES">
<head>
<script src="ajax.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Buscador avanazado con php y mysql</title>
</head>
<    body>
<div id="contenedor">
<h1>Pagina de detalle de la busqueda</h1>
</div><br />
<?php
// impedimos que salga cualquier noticia sobre algo que no esta bien en php
error_reporting(E_ALL ^ E_NOTICE);// incluimos nuestro archivo que contiene la conexion a nuestra base de datos
include('conexion.php');
// optenemos la variable que el usuario envia por la URL para comprobar aque noticia se debe
$palabra = $_GET['id'];
if($palabra == ''){
header('Location: index.php');
}else{
/* realizamos la consulata a la base de datos donde le indicamos que si
la variable recuperada por la URL es igual al id de algun registro en
nuestra tabla entonces que nos muestre todos sus resultados.
*/

$query = "SELECT * FROM registro where registro_id=$palabra";

//"SELECT registro_id, titulo, ntexto FROM registro where ntexto like '".$palabra."%'";
$respuesta = mysql_query ($query) or die(mysql_error());
if (mysql_fetch_assoc ($respuesta)<=0) {

echo "Ningun resultado relacionado con <b> ".$palabra.'<b>';
}else {
$respuesta = mysql_query ($query) or die(mysql_error());

// recuperamos los datos que trajo nuestra consulta desde la base de datos
while($row = mysql_fetch_array($respuesta))
{

echo '<h2>'.$row['titulo'].'</h2><br />';
echo '<p>'.$row['ntexto'];
echo '</p>';

}
// serramos la conexion a la base de datos
}mysql_free_result($respuesta);
}
?>
</div>

</body>
</html>

Bueno con esto finalizamos esta primera parte del tutorial sobre como crear un buscador con ajax y mysql, en la próxima entrada vamos a colocar el código de los archivos restantes que son los que le permitirán a nuestro buscador que realice búsqueda en tiempo real y nos valla mostrando los resultados.

Buscador con ajax php y mysql avanzado parte 2

Comments

  1. By john

Deja un comentario

Tu dirección de correo electrónico no será publicada.