Jquery Mentions

Adds mentioning support to your text fields.
Alternatives To Jquery Mentions
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Etherpad Lite13,993
6 days ago1November 10, 2021173apache-2.0JavaScript
Etherpad: A modern really-real-time collaborative document editor.
a year ago179mitClojure
The Light Table IDE ⛺
3 months ago109mitHTML
The last Markdown editor, ever.
Draft Js Plugins4,0283402043 days ago37August 21, 201910mitTypeScript
React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers
Scribe3,6084963 years ago68March 06, 2017109apache-2.0JavaScript
DEPRECATED: A rich text editor framework for the web platform
Bytemd3,5172413 days ago63July 21, 202236mitTypeScript
Hackable Markdown Editor and Viewer
Awesome Xcode Extensions2,547
2 years agoRuby
Awesome native Xcode extensions.
3 years ago1June 23, 2015110mitCoffeeScript
Simple rich text editor (contentEditable) for jQuery UI
Awesome Draft Js2,415
a year ago
Awesome list of Draft.js resources
3 days ago133mitGDScript
💬 Create dialogs, characters and scenes to display conversations in your Godot games.
Alternatives To Jquery Mentions
Select To Compare

Alternative Project Comparisons


This is a modification on top of the existing plugin by ivirabyan/jquery-mentions , I have added support for npm and CommonJS


Adds mentioning support to your text fields.

It's a more robust alternative to podio's jquery.mentionsInput plugin.

Live example: http://ivirabyan.github.io/jquery-mentions/

Advantages over jquery.mentionsInput:

  • Many issues are solved
  • Input styles are copied to highlighter automatically
  • Support for both textarea and input tags
  • Support for contenteditable (and as a result support for some WYSIWYG editors)
  • Hidden-input with markuped text created automatically
  • Uses jQuery UI autocomplete

Solved issues of jquery.mentionsInput:

  • Adding spaces before mention shows overlay
  • Scrolling to bottom inside textarea moves text, but not highlights
  • Typing email adress activates mentions
  • Inserting same mentions multiple times
  • Prepopulate input with text


For this plugin to work you need to include jQuery Autocomplete to your page.

var data = [
    {value: 'alex', uid: 'user:1'},
    {value: 'andrew', uid: 'user:2'},
    {value: 'angry birds', uid: 'game:5'},
    {value: 'assault', uid: 'game:3'}

$('textarea').mentionsInput({source: data});
Remote datasource (ajax):
$('textarea').mentionsInput({source: 'http://example.com/users.json'})

The url is given a query paremeter term, like http://example.com/users.json?term=Foo and must return a json list of matched values (like the above).

You can also provide custom function to source argument, for more info take a look at jQuery Autocomplete docs.

Calling a method:
$('textarea').mentionsInput('setValue', 'Hello, @[Alex](user:1)');
Getting value:

$('textarea').mentionsInput('getValue') -> Hello, @[Alex](user:1) $('textarea').mentionsInput('getRawValue') -> Hello, Alex

Don't use textarea value directly, because it contains special characters, used by plugin internally. Always use methods.

WYSIWYG editors

WARNING: This plugin does not currently work with editors, which use iframe.

To create WYSIWYG editor on your site, usually you create <textarea> tag, and then your editor replaces it with editor's visual representation, including element with contenteditable="true" attribute. So, to make mentionsInput plugin work, you need to apply the plugin to element with contenteditable="true". If you apply the plugin to your <textarea>, it'll not work. For example:

    <textarea id="content"></textarea>
        // Now your editor is initialized, find element with contenteditable.
        // For particular plugin you may find a better way to get such an element,
        // maybe even write your own plugin.
        var elEditable = $('[contenteditable=true]');



Data source for the autocomplete. See jQuery Autocomplete API for available values.

Source data is an array of objects with uid and value properties: [{uid: '123', value: 'Alex'}, ...]. If you want to display an icon in dropdown list, you can add an image property to objects in the array.


String to add to selected mention when it is inserted in text. Can be usefull if you wish to automatically insert a space after mention. For that case: $textarea.mentionsInput({suffix: ' '}) Note: only supported for textarea and input. Contenteditable does not support this option yet.


Char which trigger autocomplete, default value is '@'. Multiple chars are supported, so if you set trigger='@#', both will trigger a search.


Name of the autocomplete widget to use. May be useful when you want to somehow customize appearance of autocomplete widget, for example add headers to items list. You must inherit from widget, used internally (ui.areacomplete when you use textarea, and ui.editablecomplete when you use div with contenteditable=true).


Options to pass to jQuery Autocomplete widget. Default is {delay: 0, autoFocus: true}.



Returns marked up value.


Returns value without any markup


Takes marked up value as an argument. For example 'Hey, @[alex](user:1)'. You can also represent mentions as objects, instead of manually marking them up: $textarea.mentionsInput('setValue', 'Hey, ', {name: 'alex', uid: 'user:1'})


Returns an array of all mentions contained within the text, like this:

  {name: 'alex', uid: 'user:1'},
  {name: 'andrew', uid: 'user:2'}


Clears value. Note that you must use this method insted of manually clearing value of the input


Destroys current instance of the plugin

Popular Plugin Projects
Popular Editor Projects
Popular Libraries Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.