Prototype, al igual que otros frameworks de JavaScript, permite implementar fácilmente comportamientos que que serían dispendiosos de crear a partir del JavaScript básico y convencional. El hermanito Scriptaculous viene a ayudarnos aún mas con sus efectos y ayudantes.
Un ejemplo de estas posibilidades de rápida implementación es la simulación del autocompletar de un campo de texto.
El objeto Autocompleter acepta dos fuentes de datos diferentes.
- Una local como un arreglo de JavaScript.
- Una remota y mas dinámica a través de solicitudes AJAX.
En este artículo se va a realizar la demostración del uso de un Autocompleter.local. Para esto se requieren dos componentes.
- Un campo de texto donde el usuario escribe el criterio de búsqueda.
- Una sección de sugerencias donde el Autocompleter despliega las coincidencias basadas en el criterio de búsqueda.
Para el ejemplo anterior cuenta con los siguientes elementos.
- t_criterio: campo de texto para el criterio de búsqueda.
- resultado: es el div donde se desplegarán las sugerencias encontradas.
- departamentos: es un arreglo JavaScript con la información local y estática para las opciones de búsqueda, en este caso el listado de los departamentos de Colombia.
Para activar el autocompletado sobre t_criterio basado en los valores de departamentos, se ejecuta la siguiente instrucción JavaScript.
var ac = new Autocompleter.Local('t_criterio',
'resultado',
departamentos,
{
autoSelect : false,
frequency : 0.4,
minChars : 1,
choices : 10,
paritialSearch : false,
paritialChars : 2,
fullSearch : true,
ignoreCase : true
});
Los parámetros especificados al método Local son descritos a continuación.
- Id del campo de texto con el criterio de búsqueda.
- Id del contenedor de los resultados obtenidos.
- Arreglo con la información disponible.
- Hash con las opciones de configuración del autocompletador. Todos estos valores son opcionales y los mostrados corresponden con los valores por defecto.
A continuación se describen las opciones de configuración disponibles.
- autoSelect: Acepta automáticamente la primera sugerencia cuando sólo hay una.
- frecuency: Tiempo en segundos entre dos intentos de autocompletar.
- minChars: Cantidad mínima de carácteres necesarios para que se active el autocompletar.
- choices: Cantidad máxima de opciones sugeridas a mostrarse.
- paritialSearch: Tomar en cuenta para la búsqueda el comienzo de cada palabra o sólo el comienzo del texto.
- paritialChars: Cantidad mínima de carácteres necesarios para que se active la búsqueda parcial.
- fullSearch: Tomar en cuenta cualquier subcadena de las opciones o sólo los comienzos (palabra o línea).
- ignoreCase: Tomar o no en cuenta la diferencia entre mayúsculas/minúsculas.
Enlaces:
One Reply to “Autocompletador con Prototype/Scriptaculous – Parte I”