Sistema de menciones estilo Twitter/Facebook diseñado con jQuery

Mentions Input es un plugin desarrollado con jQuery para agregar la funcionalidad de detección de menciones en cualquier campo input-textarea, algo muy similar a lo que hacen sitios como Facebook o Twitter, que mediante el uso del @ despliega una lista de usuarios posibles según los caracteres ingresados.

El plugin esta probado en los navegadores más modernos, especialmente Firefox 6+, Chrome 15+, y finalmente Internet Explorer 8 o superior.

Ejemplo de uso:

$('textarea.mention').mentionsInput({
  onDataRequest:function (mode, query, callback) {
    var data = [
      { id:1, name:'Kenneth Auchenberg', 'avatar':'1.gif', 'type':'contact' },
      { id:2, name:'Jon Froda', 'avatar':'2.gif', 'type':'contact' },
      { id:3, name:'Anders Pollas', 'avatar':'3.gif', 'type':'contact' },
      { id:4, name:'Kasper Hulthin', 'avatar':'4.gif', 'type':'contact' },
      { id:5, name:'Andreas Haugstrup', 'avatar':'5.gif', 'type':'contact' },
      { id:6, name:'Pete Lacey', 'avatar':'6.gif', 'type':'contact' }
    ];

    data = _.filter(data, function(item) {
      return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });

    callback.call(this, data);
  }
});

Les recomiendo visitar la demostración online.

El plugin esta preparado para funcionar perfectamente solicitando la lista de usuarios mediante un mecanismo definido con AJAX, ideal para obtener la información directamente desde una base de datos.

Web: jQuery mentionsInput