Cómo crear un buscador AJAX mediante PHP y MySQL

En este tutorial te mostraré como implementar una caja de búsqueda en Ajax utilizando PHP como lenguaje principal. El hecho de utilizar un buscador AJAX otorga múltiples ventajas a un sitio web. Por ejemplo, es una opción de búsqueda más amigable para el usuario puesto que no tiene necesidad de recargar la página, y sobre todo, es una opción ligera, ya que libera carga en el servidor. Una vez dicho esto, vamos a ver cómo crear un buscador AJAX mediante PHP y MySQL.

Base de datos MySQL

Para este proyecto necesitaremos una base de datos en la cual buscar lo introducido por el usuario. Para ello crearemos la tabla “user_name” que albergará la información de usuarios ficticios que el cliente tendrá y podrá buscar en la caja de búsqueda.

CREATE TABLE 'user_name'
(
    user_id INT(20) PRIMARY KEY,
    first_name TEXT
);

El HTML

En este caso utilizaré la librería de Twitter typeahead para hacer la llamada AJAX al archivo PHP. Es una librería muy limpia y potente ideal para este tipo de propósitos. Solo tienes que añadir la ruta en la sección HEAD para insertarla y comenzar a utilizarla.

<html>
  <head>
    <title>Ajax Search Box using PHP and MySQL</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">        </script>
     <script src="typeahead.min.js"></script>
    </head>
    <body>
     <input type="text" name="typeahead">
    </body>
    </html>

En el código de antes hemos creado el front-end de nuestra aplicación.

El CSS

Inserta este código CSS en el header el archivo HTML, o bien, en un archivo .css aparte para personalizar nuestro proyecto.

.bs-example{
	font-family: sans-serif;
	position: relative;
	margin: 50px;
}
.typeahead, .tt-query, .tt-hint {
	border: 2px solid #CCCCCC;
	border-radius: 8px;
	font-size: 24px;
	height: 30px;
	line-height: 30px;
	outline: medium none;
	padding: 8px 12px;
	width: 396px;
}
.typeahead {
	background-color: #FFFFFF;
}
.typeahead:focus {
	border: 2px solid #0097CF;
}
.tt-query {
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
	color: #999999;
}
.tt-dropdown-menu {
	background-color: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	margin-top: 12px;
	padding: 8px 0;
	width: 422px;
}
.tt-suggestion {
	font-size: 24px;
	line-height: 24px;
	padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
	background-color: #0097CF;
	color: #FFFFFF;
}
.tt-suggestion p {
	margin: 0;
}

Llamando al script PHP

Nuestra próxima tarea es llamar a nuestro script PHP en el momento que el usuario teclee algun carácter en la caja de búsqueda. Puesto que estamos utilizando la librería typeahead de Twitter, podemos hacerlo de este modo:

<script>
    $(document).ready(function(){
    $('input.typeahead').typeahead({
        name: 'typeahead',
        remote:'search.php?key=%QUERY',
        limit : 10
    });
});
    </script>

Esto automáticamente almacenará el contenido de la caja de texto en la variable %QUERY.

Obteniendo la información de MySQL en formato JSON

Y aquí nos ponemos mano a la obra con la tarea principal. En nuestro archivo PHP, lo primero que tenemos que hacer es recuperar el valor del $_GET en donde hemos almacenado lo que el usuario ha escrito en la caja de búsqueda. Una vez hecho esto, tendremos que hacer la conexión a la BD y realizar la query con el valor de la caja de búsqueda que acabamos de recuperar para obtener resultados relevantes.

Una vez obtenido el resultado, tendremos que formatearlo en JSON y devolverlo al front-end para mostrarlo como resultado de la búsqueda.

<?php
    $key=$_GET['key'];
    $array = array();
    $con=mysql_connect("localhost","root","");
    $db=mysql_select_db("database name",$con);
    $query=mysql_query("select * from table_name where <coloumn_name> LIKE '%{$key}%'");
    while($row=mysql_fetch_assoc($query))
    {
      $array[] = $row['title'];
    }
    echo json_encode($array);
?>

Fuente: codeforgeek.com

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.