Mention.js – Add @user Mention Functionality To Typeahead

Mention.js – Add @user Mention Functionality To Typeahead


SHARE & COMMENT

Happy Monday! Today, we are introducing Mention.js, a jQuery plugin that creates a Lightweight wrapper for adding @user mention functionality to Twitter Bootstrap Typeahead plugin. This enables you to have Twitter-like user mentions in textareas.

Usage

First of all, we need to point out that his plugin requires two libraries:

After we install our two libraries, we reference the mention method to a specific textarea we want to add Mention.js to:

$("#textarea-mentions").mention({
 delimiter: '@',
 users: [{
      username: "MondayJS"
    }, { 
      username: "AndresVelda"
    }, { 
      username: "noessoccer"
    }]
});

The users parameter accepts an array of objects. NOTE: username attribute is required for this script to work.

We can also set sensitivity for search priority:

$("#textarea-mentions").mention({
 delimiter: '@',
 sensitive: true,
 users: [{
      username: "MondayJS"
    }, { 
      username: "AndresVelda"
    }, { 
      username: "noessoccer"
    }]
});

If we set sensitive to true, items are ordered by priority as follows:

  • Highest: If first letter matches exactly
  • High: If first letter matches regardless of case
  • Med: If target has matching letters’ case
  • Low: if target has matching character regardless of case

Also, we can search by full name as follows:

$("#textarea-mentions").mention({
 queryBy: ['name', 'username'],
 users: [{
      username: "MondayJS",
      name: "MondayJS.com",
      image: "https://pbs.twimg.com/profile_images/460557053245652992/1PnggeBl_400x400.png"
    }, { 
      username: "AndresVelda",
      name: "Andres Iriarte",
      image: "https://pbs.twimg.com/profile_images/476194174652272640/QWxRZdV9_400x400.jpeg"
    }, { 
      username: "noessoccer",
      name: "NESEF",
      image: "https://pbs.twimg.com/profile_images/477841169615839232/cnS4V3yq_400x400.png"
    }]
});

Demo

View on GitHub

 

SHARE & COMMENT