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
douglas
12 años ago
tremendo dato amigo muchas gracias =)
Como titular en la web y no morir en el intento…pruebas A/B (Multivariante) con jQuery | TechnologyNews
12 años ago
[…] Sistema de menciones estilo Twitter/Facebook diseñado con jQuery window.___gcfg = {lang: "en"}; (function() { var po = document.createElement("script"); po.type = "text/javascript"; po.async = true; po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })(); Como titular en la web y no morir en el intento…pruebas A/B (Multivariante) con jQuery (function() { var s = document.createElement("script"), s1 = document.getElementsByTagName("script")[0]; s.type = "text/javascript"; s.async = true; s.src = "http://www.tipy.com/button.js"; s1.parentNode.insertBefore(s, s1); })(); Shortlink: […]