Autocompletar usando Script.aculo.us, PHP y MySQL

Spinning

Sigo aprendiendo (muy poco a poco) y disfrutando de AJAX y más concretamente de las librerías Script.aculo.us y Prototype (espectaculares). Una de las cosas que quería implementar y probar en mis scripts era la posibilidad de ofrecer la cualidad Autocompletar en los cuadros de texto (al estilo de Google Suggest). Así que usando la documentación del wiki de Script.aculo.us he podido realizar un formulario donde puedes buscar al alumnado por el nombre. Tras escribir la primera letra, el script ya comienza a sugerir resultados, resultados que provienen de una base de datos MySQL y que un script PHP se encarga de consultar y listar. El esquema de funcionamiento es el siguiente:

1.- Se carga la página con el formulario (se cargan entonces las librerías script.aculo.us y prototype). En el formulario se presenta una caja de texto donde el cliente introducirá su búsqueda. Dentro del formulario hay un script javascript que llama a las librerías para que genere el proceso de autorrelleno. Entre otros parámetros, se pasan el número de letras mínimo que el cliente introducirá para que se vayan ofreciendo resultados, el url del script php, el id de la caja de texto, el id del div donde se presentará la lista de sugerencias, etcétera.

2.- Las librerías mencionadas llaman y pasan el valor escrito por el usuario al script php que lo recoge, lo limpia (con trim), conecta con MySQL, realiza la consulta (palabras parecidas) y lista los resultados.

3.- El producto de la consulta se pasa al div y éste se presenta. Finalmente, cuando el usuario selecciona de la lista un valor, éste se inserta de manera automática en la caja de texto.

Veamos el código:

Index.html:


<!--
/*
This file is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.You cand find a copy of the GNU General Public License in the “license” directory.

You should have received a copy of the GNU General Public License along with SIESTTA; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.

Ramon Castro (http://ramoncastro.es)

Iconos: Proyecto Tango (http://tango.freedesktop.org/Tango_Desktop_Project)

Uso de librerías AJAX:

Prototype -> (http://www.prototypejs.org/)

Script.aculo.us -> (http://script.aculo.us/)

*/

–>
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Principal</title>
<link href=”index.css” rel=”stylesheet” type=”text/css” />
<script src=”js/prototype.js” type=”text/javascript”></script>
<script src=”js/scriptaculous.js” type=”text/javascript”></script>
</head>
<body>
<div id=”cuerpo”>
<b class=”rtop”><b class=”r1″></b><b class=”r2″></b><b class=”r3″></b><b class=”r4″></b></b>
<table>
<tr>
<td>
<img src=”images/alum.png” alt=”Alumn@s” />
</td>
<td>
<input type=”text” id=”autorelleno” name=”texto_auto”/>
<span id=”spinner” style=”display: none”>
<img src=”images/spinner.gif” alt=”Consultando…” />
</span>
<div id=”lista_opciones” class=”autorelleno”>
</div>
<script>
new Ajax.Autocompleter(“autorelleno”, “lista_opciones”, “lista.php”, {method: “post”, paramName: “value”, minChars: 1, indicator: “spinner”});
</script>
</td>
<td>
Búsqueda de Alumn@s por nombre
</td>
</tr>
</table>
<b class=”rbottom”><b class=”r4″></b><b class=”r3″></b><b class=”r2″></b><b class=”r1″></b></b>
</div>
</body>
</html>

Index.css:


/*FuentesAutorrelleno –> http://script.aculo.us

Esquinas redondeadas –> http://usalo.es (http://usalo.es/53/limar-las-esquinas-con-css/)

*/

div.autorelleno {
position:absolute;
width:250px;
background-color:white;
border:1px solid #888;
margin:0px;
padding:0px;
}
div.autorelleno ul {
list-style-type:none;
margin:0px;
padding:0px;
}
div.autorelleno ul li.selected { background-color: #ffb;}
div.autorelleno ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
height:18px;
cursor:pointer;
}
#cuerpo{
position:absolute;
width:37%;
top: 25%;
left:30%;
background:#F0EDE0;
}
b.rtop, b.rbottom{
display:block;
background: #FFF
}
b.rtop b, b.rbottom b{
display:block;
height: 1px;
overflow: hidden;
background: #F0EDE0
}
b.r1{
margin: 0 5px
}
b.r2{
margin: 0 3px
}
b.r3{
margin: 0 2px
}
b.rtop b.r4, b.rbottom b.r4{
margin: 0 1px;
height: 2px
}

Lista.php:


<?php/*
This file is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

You cand find a copy of the GNU General Public License in the “license” directory.

You should have received a copy of the GNU General Public License along with SIESTTA; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.

Ramon Castro (http://ramoncastro.es)

Iconos: Proyecto Tango (http://tango.freedesktop.org/Tango_Desktop_Project)
*/

//recibo variable
$valor = $_POST['value'];

//elimino espacios en blanco al principio y final

$cadena = trim($valor);

//conectamos con mysql y con la base de datos

$con_mysql=mysql_connect(‘localhost’,’scripts’,’scripts’);

if (!$con_mysql) {echo ‘No se ha podido encontrar el servidor de datos’;exit;}

mysql_select_db(’scripts’);

//consultamos los registros coincidentes

$select = mysql_query(“select * from alum where nombre like ‘$cadena%’”);

echo ‘<ul>’;

//si no hay registros mostramos mensaje

if(mysql_num_rows($select) == 0)

{

echo ‘<li>No hay resultados</li>’;

}

else

{

//montamos bucle para presentar la lista

for($a=0;$a<(mysql_num_rows($select));$a++)
{
//extraemos registro actual
$reg = mysql_fetch_array($select);
//listamos
echo ‘<li>’.$reg['nombre'].’</li>’;
}

}

//cerramos lista

echo ‘</ul>’;

?>

Saludos

[tag]script.aculo.us, prototype, ajax, autocompletar, php, mysql[/tag]

Acerca de esta Entrada

You’re currently reading “Autocompletar usando Script.aculo.us, PHP y MySQL,” an entry on PeHachePe

Publicado:
Marzo 17, 2007 / 9:42 pm
Categoría:
AJAX
Etiquetas: