Facebook-like @mention Autocomplete Plugin With jQuery - mentiony

mentiony is a jQuery plugin that listens for specific trigger characters (typically '@') and allows you to mention people in a textarea / input field like you are used to on Facebook or Twitter.

See also:

• Twitter Like @Mentions Auto Suggesting Plugin with jQuery - Bootstrap Suggest
• jQuery Plugin To Generate Links For URLs, Mentions and Hashtags - Linky
• Twitter & Facebook Like Mention Input Plugin with jQuery

How to use it:

1. Load the necessary jquery.mentiony.css for primary CSS styles.

<link rel="stylesheet" href="css/jquery.mentiony.css" >

2. Load jQuery library and the jquery.mentiony.js at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.mentiony.js"></script>

3. Call the function on desired text field (textarea or input field) and config the plugin to fetch autocomplete data from local.

$('textarea, input').mentiony({
  onDataRequest: function (mode, keyword, onDataRequestCompleteCallback) {

    var data = [
        { id:1, name:'Name 1', 'avatar':'Avatar1.gif', 'info':'Info1' , href: '#'},
        ...
    ];

    data = jQuery.grep(data, function( item ) {
        return item.name.toLowerCase().indexOf(keyword.toLowerCase()) > -1;
    });

    // Call this to populate mention.
    onDataRequestCompleteCallback.call(this, data);
  }
});

4. Config the plugin to fetch autocomplete data from an external data source via AJAX.

$('textarea, input').mentiony({
  onDataRequest: function (mode, keyword, onDataRequestCompleteCallback) {
    $.ajax({
      method: "GET",
      url: "js/example.json?query="+ keyword,
      dataType: "json",
      success: function (response) {
        var data = response;

        // NOTE: Assuming this filter process was done on server-side
        data = jQuery.grep(data, function( item ) {
            return item.name.toLowerCase().indexOf(keyword.toLowerCase()) > -1;
        });
        // End server-side

        // Call this to populate mention.
        onDataRequestCompleteCallback.call(this, data);
      }
    });
  }
});

5. All default configuration options.

$('textarea, input').mentiony({

  // enable debug mode
  debug:              0, 

   /**
   * True [default] will make mention area size equal to initial size of textarea. NOTE: Textarea must visible on document ready if this value is true.
   * False will not specify the CSS width attribute to every mention area.
   */
  applyInitialSize:   true,

  // Do mention only when user input idle time > this value
  timeout:      400

  // @keyword-to-mention
  triggerChar:        '@', 

  /**
   * Function for mention data processing
   * @param mode
   * @param keyword
   * @param onDataRequestCompleteCallback
   */
  onDataRequest: function (mode, keyword, onDataRequestCompleteCallback) {

  },

  /**
   * Addition keyboard event handle for old and new input
   * Why we need this:
   *  • Because some original js was binded to textarea, we need to bind it to contenteditable too.
   *  • Useful when you wanna passing some event trigger of old element to new editable content
   *  • Old input element already be trigger some event, then you need to pass some needed event to new editable element
   * @param event
   * @param oldInputEle
   * @param newEditableEle
   */
  onKeyPress: function (event, oldInputEle, newEditableEle) {
      oldInputEle.trigger(event);
  },
  onKeyUp:    function (event, oldInputEle, newEditableEle) {
      oldInputEle.trigger(event);
  },
  onBlur:     function (event, oldInputEle, newEditableEle) {
      oldInputEle.trigger(event);
  },
  onPaste:    function (event, oldInputEle, newEditableEle) {
      oldInputEle.trigger(event);
  },
  onInput: function (oldInputEle, newEditableEle) {

  }, 

  // adjust popover relative position with its parent.
  popoverOffset:      {
      x: -30,
      y: 0
  },

  templates:          {
    container:        '<div id="mentiony-container-[ID]" class="mentiony-container"></div>',
    content:          '<div id="mentiony-content-[ID]" class="mentiony-content" contenteditable="true"></div>',
    popover:          '<div id="mentiony-popover-[ID]" class="mentiony-popover"></div>',
    list:             '<ul id="mentiony-popover-[ID]" class="mentiony-list"></ul>',
    listItem:         '<li class="mentiony-item" data-item-id="">' +
                      '<div class="row">' +
                      '<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">' +
                      '<img src="https://avatars2.githubusercontent.com/u/1859127?v=3&s=140">' +
                      '</div>' +
                      '<div class="pl0 col-xs-9 col-sm-9 col-md-9 col-lg-9">' +
                      '<p class="title">Company name</p>' +
                      '<p class="help-block">Addition information</p>' +
                      '</div>' +
                      '</div>' +
                      '</li>',
    normalText:       '<span class="normal-text">&nbsp;</span>',
    highlight:        '<span class="highlight"></span>',
    highlightContent: '<a href="[HREF]" class="mentiony-link">[TEXT]</a>',
  }
});

Changelog:

2019-02-18

• added browser and mobile compatibility

2017-07-19

• popover top position is corrected by taking scroll value into account

2016-06-17

• Add css for placeholder support
• Can custom keyboard event handle

2016-06-13

• Handle some exception

2016-06-09

• Fix small bug

---

This awesome jQuery plugin is developed by luatnd. For more Advanced Usages, please check the demo page or visit the official website.