En esta ocasión vamos a ver como hacer un casillero de un formulario, que obtenga sus valores directamente de una tabla de MySQL mediante el uso de AJAX y PHP. Esta es una característica que hemos visto ser implementada con mucha frecuencia en aplicaciones de búsqueda, principalmente, pero no se limita a las búsquedas sino a cualquier función de un formulario. Usualmente cuando escribimos una palabra o frase para buscar en Google, por ejemplo, vemos como el casillero se llena automáticamente, facilitándonos el trabajo. Para ello sigamos los siguientes pasos:
1. Diseñemos las cabeceras del sistema
Vamos a utilizar la librería JavaScript typeahead de Twitter para realizar una llamada de AJAX hacia el archivo de PHP. Este es un método sencillo y limpio. Solamente debes colocarlo en el <head> de tu código y estarás listo para el siguiente paso:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="typeahead.min.js"></script>
En el <head> de nuestro archivo, también debemos incluir un poco de css:
<style type="text/css">
.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: 40px;
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;
}
</style>
Llamemos al Script de PHP mediante el método GET
Este pequeño script nos permitirá realizar las funciones del archivo PHP y aplicarlas en el casillero correspondiente de nuestro formulario:
<script>
$(document).ready(function(){
$('input.campo1').typeahead({
name: 'campo1',
remote:'buscar1.php?key=%QUERY',
limit : 30
});
$('input.campo2').typeahead({
name: 'campo2',
remote:'buscar2.php?key=%QUERY',
limit : 30
});
});
</script>
Nótese que en el script, campo1 y campo 2, hacen referencia a los campos de nuestra tabla en la base de datos MySQL. En este caso estoy colocando dos campos porque mi formulario tendrá dos casilleros en el formulario que llamarán a distintos campos en la base de datos. Si necesitamos un solo casillero, obviamos la segund aparte del script. Si necesitamos más casilleros, agregamos cuantas secciones queramos en el script. Este script buscará en forma automática el valor correspondiente al casillero del formulario mediante el comando %QUERY.
Ahora: saquemos los datos de MySQL y apliquémoslos como JSON
Los archivos buscar1.php y buscar2.php, contienen un código muy sencillo :
<?php
$key=$_GET['key'];
$array = array();
$con=mysql_connect("localhost","usuario","clave");
$db=mysql_select_db("basededatos",$con);
$query=mysql_query("select * from tabla where campo LIKE '%{$key}%'");
while($row=mysql_fetch_assoc($query))
{
$array[] = $row['campo'];
}
echo json_encode($array);
?>
Expliquemos un poco este código. La primera parte, como podemos apreciar, obtiene el valor correspondiente mediante GET. En una segunda parte, realizamos la conexión a la base de datos. En una tercera sección, realizamos la búsqueda del término obtenido mediante GET (es decir, el valor de $key), de la tabla que definamos y el campo que definamos. En la fase final, el resultado es formateado como JSON.
Recordemos que en el caso que estamos tratando tenemos que crear dos archivos PHP para que realicen estas tareas, uno denominado buscar1.php y otro denominado buscar2.php.
<label for="campo1">Campo # 1:</label>
<input type="text" name="campo1" class="campo1 tt-query" autocomplete="off" spellcheck="false" placeholder="Escriba el valor para el campo 1">
<label for="campo2">Campo # 2:</label>
<input type="text" name="campo2" class="campo2 tt-query" autocomplete="off" spellcheck="false" placeholder="Escriba el valor para el campo 2">
Esta parte del código va, por supuesto dentro de nuestro <form> y </form>. En resumen, tenemos prácticamente tres archivos que requerimos:
1. El archivo donde va el formulario (formulario.php, por ejemplo); donde va nuestro formulario y los scripts que servirán para dirigir la búsqueda mediante el método GET.
2. Nuestros dos archivos de PHP que ejecutan la orden proveniente del script. en nuestro archivo PHP (Por ejemplo, formulario.php).
Nota: Este método está basado en la metodología descrita por Shahid Shaikh en "Code for Geek".
