XAJAX: una librería de AJAX para PHP (parte 3)

Ejemplo 3. Un formulario con sugerencias para autocompletado

En este ejemplo se muestra un ejemplo de autocompletado de campos de formulario utilizando Xajax.

En el formulario se le pide al usuario que introduzca el nombre de un país en un campo de texto pero para evitar errores le ofrecemos una lista de sugerencias a medida que va escribiendo. Los nombres de esta lista se leen de una base de datos de países con lo que incluimos acceso a base de datos en este ejemplo para hacerlo más realista. Si hace clic en una de las sugerencias, se le asigna el valor de la sugerencia seleccionada al campo de texto. Cuanto menos escriba el usuario, menos errores cometerá.

Además, también aplicamos validación del campo. Sólo daremos por bueno el nombre si coincide con alguno de la base de datos aunque la comparación la hacemos sólo en minúsculas.

Figura 1. Captura de pantalla de la aplicación

Figura 1. Captura de pantalla de la aplicación.

‘autocompletado.php’:
<?php
require (‘xajax/xajax.inc.php’);
$xajax = new xajax();
$xajax->setCharEncoding(‘utf-8’);

function autocompleta($input){
$respuesta = new xajaxResponse();
$output = "";
$db = mysql_connect("localhost", "root", "");
mysql_select_db("test");
mysql_query("SET NAMES ‘utf8’");
//aquellos paises que empiecen como el valor del input
$query = "SELECT nombre FROM pais WHERE nombre LIKE ‘".$input."%’";
$res = mysql_query($query);

//si no hay texto, se deja la capa en blanco y salimos
if ($input == ""){
$respuesta->addAssign("divSugerencias", "innerHTML", "");
return $respuesta;
}

//numero de resultados coincidentes
$num = mysql_num_rows($res);

if ($num == 0){ //si no hay coincidencias se avisa
$output = "<font color=’red’>Alerta: No existe ning&uacute;n pa&iacute;s con ese nombre</font>";
}
else if ($num == 1){ //si solo hay una coincidencia
$row = mysql_fetch_row($res);
if (strcasecmp($input, $row[0]) == 0){ //si los nombres coinciden, exito
$output = "<font color=’green’><b>OK</b></font>";
}
else{ //muestra el select con la unica opcion
$output = "
<div><b>Sugerencias:</b></div>
<div id=’divLista’>
<table name=’tablePais’ id=’tablePais’>
<tr>
<td onClick="xajax_seleccionaPais(‘".$row[0]."’);xajax_autocompleta(‘".$row[0]."’)">".$row[0]."</td>
</tr>
</div>
</table>>";
}
}
else{ //si hay varias coincidencias se envia un listado
$output .= "<div><b>Sugerencias:</b></div>
<div id=’divLista’>
<table name=’tablePais’ id=’tablePais’ cellpadding=’0’cellspacing=’0′>";
while ($row = mysql_fetch_row($res)){
$output .= "<tr><td onClick="xajax_seleccionaPais(‘".$row[0]."’);xajax_autocompleta(‘".$row[0]."’)">".$row[0]."</td></tr>";
}
$output .= "</div></table>";
}

//asignamos es contenido de la carpeta sugerencias
$respuesta->addAssign("divSugerencias", "innerHTML", $output);
return $respuesta;
}

function seleccionaPais($pais){
$respuesta = new xajaxResponse();
$respuesta->addAssign("textPais", "value", $pais);
return $respuesta;
}

$xajax->registerFunction(‘autocompleta’);
$xajax->registerFunction(‘seleccionaPais’);
$xajax->processRequests();

?>
<html>

<head>
<?php
$xajax->printJavascript(‘xajax/’);
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#divLista{
width:300px;height:100px;overflow:auto;border:solid 1px #ccc;
}
</style>
</head>

<body>
<form action="#" name="formPais" id="formPais">
<b>Introduzca pa&iacute;s:</b> <input type="text" name="textPais" id="textPais" onkeyup="xajax_autocompleta(this.value)" />
<div id="divSugerencias" style="margin-top:10px;"></div>
</form>
</body>
</html>

Descargar archivo PHP.
Descargar archivo SQL con la base de datos de países.

Explicación:

En este caso tenemos dos funciones diferentes:

  • autocompleta: con cada tecla que se pulsa en la caja de texto del formulario se consulta a la base de datos pasando el valor de esta caja de texto a la función. Se busca en la base de datos todos aquellos países cuyo nombre comience por el texto insertado en la caja de texto. Dentro de la función se pueden dar varios casos:
    • Que el valor sea nulo: se borra la capa de sugerencias.
    • Que no haya ninguna coincidencia: se avisa en la capa de sugerencias que no hay ningún país con ese nombre.
    • Que sólo haya una coincidencia: si el nombre de la sugerencia es igual al valor de la caja de texto se muestra el mensaje OK.
    • Que hayan varias coincidencias: se muestra una tabla que lista los países con nombre parecido. Si se hace clic en una celda se llama a la función seleccionaPais y se actualiza el contenido de la capa de sugerencias.
  • seleccionaPais: asigna a la caja de texto el valor seleccionado en la tabla de sugerencias.

Ambas funciones se registran mediante y se ordena que xajax procese las peticiones:

$xajax->registerFunction(‘autocompleta’);
$xajax->registerFunction(‘seleccionaPais’);
$xajax->processRequests();

En este caso, la base de datos que se ha utilizado es MySQL y la librería de funciones para mysql que viene con las distribuciones de PHP.

También hemos definido el juego de caracteres que se utilizará en la aplicación:

$xajax->setCharEncoding(‘utf-8’);

En la base de datos:

mysql_query("SET NAMES ‘utf8’");

Y también en el head de la página:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Si no nos aseguramos de que se corresponden perfectamente los juegos de caracteres puede ser que nombres de países como España o Etiopía nunca coincidan por llevar acentos o eñes.

He querido hacer un ejemplo muy sencillo para que sea fácilmente entendible. Ya sé que hay muchas páginas donde ofrecen sistemas de autocompletado mucho más elaborados, pero el código sería mucho mayor. No es tan vistoso como lo que se suele utilizar pero no lo hecho con el fin de usarlo directamente en una página web sino con motivos instructivos para iniciarnos en el mundo de Ajax.

Sin categoría

Deja una respuesta