At.js: Autocompletar para campos textarea

At.js es un bonito proyecto construido con JavaScript para incorporar a nuestros proyectos la función de autocompletar en campos textarea. Algo muy similar a lo que hacen redes sociales como Facebook o Twitter cuando utilizamos el símbolo @ y aparece la lista de amigos disponibles.

Esta biblioteca da un paso más cuando permite no solo autocompletar con texto sino con imágenes, por ejemplo podemos utilizar este recurso para sugerir smileys cuando el usuario emplea los dos puntos (:).

Ejemplo de uso:

$('.inputor').atwho('run').atwho({
    at: "@",
    alias: "at-mentions",
    'callbacks': {
        remote_filter: function (query, callback) {
            // this.super_call("remote_filter", query, callback)
           callback(null)
    }
}

Como se puede ver en el ejemplo, implementar esta biblioteca JavaScript es muy sencillo.

Una ventaja de este recurso es que permite definir cualquier carácter o símbolo a la hora de activar el autocomplementar, solo es necesario definirlo en la inicialización del script.

At.js también soporta eventos del teclado, permitiendo utilizar las teclas para seleccionar un valor cuando se despliega el cuadro con opciones.

Los requerimientos son basicos: jQuery 1.7 o superior y la biblioteca Caret.js.

Pablo: Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.
Entradas relacionadas