Script.aculo.us es una de las muchas librerías que han surgido para facilitar el desarrollo de aplicaciones JavaScript y que están basadas en Prototype. El autor original de la librería es Thomas Fuchs, aunque actualmente recibe contribuciones de numerosos programadores, ya que la librería se distribuye de forma completamente gratuita y dispone de una buena documentación: http://wiki.script.aculo.us/scriptaculous/
La librería está dividida en varios módulos:
- Efectos: permite añadir de forma muy sencilla efectos especiales a cualquier elemento de la página. La librería incluye una serie de efectos básicos y otros efectos complejos construidos con la combinación de esos efectos básicos. Entre los efectos prediseñados se encuentran el parpadeo, movimiento rápido, aparecer/desaparecer, aumentar/disminuir de tamaño, desplegarse, etc.
- Controles: define varios controles que se pueden añadir directamente a cualquier aplicación web. Los tres controles que forman este módulo son: "arrastrar y soltar", que permite definir los elementos que se pueden arrastrar y las zonas en las que se pueden soltar elementos; "autocompletar", que permite definir un cuadro de texto en el que los valores que se escriben se autocompletan con ayuda del servidor; editor de contenidos, que permite modificar los contenidos de cualquier página web añadiendo un sencillo editor AJAX en cada elemento.
- Utilidades: la utilidad principal que incluye se llama
builder, que se utiliza para crear fácilmente nodos y fragmentos complejos de DOM.
La documentación de script.aculo.us es muy completa e incluye muchos ejemplos, por lo que a continuación sólo se muestra el uso de uno de sus componentes más populares. En uno de los ejercicios anteriores, se realizaba un ejemplo de autocompletar el texto introducido por el usuario. El código completo del ejercicio ocupa más de 140 líneas.
El siguiente código hace uso de script.aculo.us para conseguir el mismo resultado con un 90% menos de líneas de código:
window.onload = function() {
// Crear elemento de tipo <div> para mostrar las sugerencias del servidor
var elDiv = Builder.node('div', {id:'sugerencias'});
document.body.appendChild(elDiv);
new Ajax.Autocompleter('municipio', 'sugerencias',
'http://localhost/autocompletaMunicipios.php?modo=ul',
{paramName: 'municipio'}
);
}La sintaxis del control Ajax.Autocompleter() es la siguiente:
new Ajax.Autocompleter(idCuadroTexto, idDivResultados, url, opciones);El primer parámetro (idCuadroTexto) es el identificador del cuadro de texto en el que el usuario escribe las letras que se van a autocompletar. El segundo parámetro (idDivResultados) indica el identificador del elemento <div> en el que se va a mostrar la respuesta del servidor. En el ejemplo anterior, este <div> se crea dinámicamente cuando se carga la página. El tercer parámetro (url) indica la URL del script de servidor que recibe las letras escritas por el usuario y devuelve la lista de sugerencias que se muestran. El último parámetro (opciones) permite modificar algunas de las opciones por defecto de este control.
A continuación se muestran las opciones más importantes disponibles para el control de autocompletar:
| Opción | Descripción |
|---|---|
paramName |
El nombre del parámetro que se envía al servidor con el texto escrito por el usuario. Por defecto es igual que el atributo name del cuadro de texto utilizado para autocompletar |
tokens |
Permite autocompletar más de un valor en un mismo cuadro de texto. Más adelante se explica con un ejemplo. |
minChars |
Número mínimo de caracteres que el usuario debe escribir antes de que se realice la petición al servidor. Por defecto es igual a 1 carácter. |
indicator |
Elemento que se muestra mientras se realiza la petición al servidor y que se vuelve a ocultar al recibir la respuesta del servidor. Normalmente es una imagen animada que se utiliza para indicar al usuario que en ese momento se está realizando una petición al servidor |
updateElement |
Función que se ejecuta después de que el usuario seleccione un elemento de la lista de sugerencias. Por defecto el comportamiento consiste en seleccionar el elemento, mostrarlo en el cuadro de texto y ocultar la lista de sugerencias. Si se indica una función propia, no se ejecuta este comportamiento por defecto. |
afterUpdateElement |
Similar a la opción updateElement. En este caso, la función indicada se ejecuta después de la función por defecto y no en sustitución de esa función por defecto. |
La opción tokens permite indicar los caracteres que separan los diferentes elementos de un cuadro de texto. En el siguiente ejemplo:
new Ajax.Autocompleter('municipio', 'sugerencias',
'http://localhost/autocompletaMunicipios.php?modo=ul',
{ paramName: 'municipio', tokens: ',' }
);La opción tokens indica que el carácter "," separa los diferentes elementos dentro de un mismo cuadro de texto. De esta forma, si después de autocompletar una palabra se escribe un carácter "," el script autocompletará la siguiente palabra.