Add @mentions To Input Fields – jQuery sMention Plugin


Mentioning persons using is pretty common on social web sites. Facebook, Google+ and even StackOverflow have the @mention feature. They developed it on their own and doesn’t share the code with others. If you are developing a social site, then it’s better to have this mention feature. I wanted this, but the jQuery plugins I found was too big.

The first plugin I found was 20 KB ! This made me create a plugin of my own to accomplish my need. Hence I created sMention – a plugin that implements the @mention feature on elements. I created it in a day, so there might be errors and it isn’t perfect. I made a GitHub repository for sMention. You can contribute to sMention by suggestions, feedback and reporting bugs.

Current Version : 0.2

Size : 4.0 KB

Last Update : 25 / 01 / 2014 (DD/MM/YYYY)

In this post I’m going to give you the details and usage of this plugin.

Usage

Add the following two lines of code in the head section of your HTML :

<script src="smention.js"></script>
<link href="smention.css" rel="stylesheet"/>

The smention.js and smention.css can be found in the Download package or in the GitHub repository (https://github.com/subins2000/smention).

A simple example is :

$("#textarea").smention("get_users.php");

The smention function also accepts other parameters :

Parameters

  • URL     – The URL to send the request
  • Options – A JSON array containing the options

Currently the options that supports are :

  • avatar : false ( If set to true, avatars will be shown aside to the name )
  • extraParams : {} ( If a JSON array is given, it will be sent as GET parameters within the request to the URL )
  • position : “above” ( If set to “below”, the list will be shown below the input field )
  • after : null ( If a string is given, it will be added within the selection of user. eg : @1 text_added )
  • cache : true ( If set to false, requests will not be cached )

Response Data

The response data which the plugin will parse should be in JSON format. An example is given :

{
 "0" : {
  "id":"1",
  "name":"Subin",
  "avatar":"http://open.subinsb.com/data/1/img/avatar"
 }, 
 "1" : {
  "id":"2",
  "name":"Simrin",
  "avatar":""
 }
}

By default the avatar win’t be shown unless you set the “avatar” parameter to “true”.

The id key holds the unique id of the user. This can be a integer or a username according to your system.

Customize

You can change the trigger character from @ to # or any other characters. You only need to replace the keycode. In the smention.js file, replace all 50 character to 51 if you need to trigger on # character. Here are some of the keycodes for special characters :

keyCode - Key - Description
51      - 3   - used for <strong>#</strong>
52      - 4   - used for <strong>$</strong>
54      - 6   - used for <strong>^</strong> 

You can find more key codes from here.

Examples

Adding on the #textarea element (textarea) with avatars :

$("#textarea").smention("get_users.php",{
 avatar : true
});

Adding on the #input element (input[type=text]) with extraParams :

$("#input").smention("get_users.php",{
 extraParams : {"akey" : "avalue"}
});

Adding a white space after the user selection :

$("#input").smention("get_users.php",{
 after : " "
});

The above code will add a white space after the string of the user selection. Example :

@subin 

If the position parameter in options is set to “below”, the suggestion box will be below the input :

0080

instead of above the input :

0081

This plugin is used in Open. You can see this plugin in action @ Open. Please contribute to this plugin. We can make this plugin more awesome. I will keep improving this project if I get time.