A bootstrap plugin for your mention needs.
The version 2 of this plugin now supports bootstrap 4 and contenteditable that uses jquery.caret (optional).
Several quick start options are available:
- download latest release
- npm:
npm install --save bootstrap-suggest - bower:
bower install bootstrap-suggest
** Make sure to link bootstrap-suggest.js and bootstrap-suggest.css to your project
<div class="form-group"> <label for="comment">start typing with @</label> <textarea class="form-control" rows="5" id="comment"></textarea> </div>
var users = [
{username: 'lodev09', fullname: 'Jovanni Lo'},
{username: 'foo', fullname: 'Foo User'},
{username: 'bar', fullname: 'Bar User'},
{username: 'twbs', fullname: 'Twitter Bootstrap'},
{username: 'john', fullname: 'John Doe'},
{username: 'jane', fullname: 'Jane Doe'},
];
$('#comment').suggest('@', { data: users, map: function(user) { return { value: user.username, text: '<strong>'+user.username+'</strong> <small>'+user.fullname+'</small>' } } })
http://lodev09.github.io/bootstrap-suggest/#api
All bugs, feature requests, pull requests, feedback, etc., are welcome. Visit my site at www.lodev09.com.
© 2018 - Coded by Jovanni Lo / @lodev09
Released under the MIT license. See LICENSE file.