@mention Autocomplete In ES6 JS

Category: Form , Javascript | December 12, 2018
Views Total:3,088 views
Official Page:Go to website
Last Update:December 12, 2018


@mention Autocomplete In ES6 JS


This is a Vanilla JavaScript (ES6) implementation of the popular @mention someone autocomplete functionality in a textarea element. Inspired by Github, Facebook, Twitter, etc.

See also:

How to use it:

Import the main JavaScript into the document.

<script src="main.js"></script>

Initialize the mention on your textarea and define an array of user data as follows:

<textarea id="txtarea" placeholder="@someone"></textarea>
  id: 'txtarea',
  people: [{
    name: 'John F', 
    username: 'john' , 
    image : '1.jpg'
    name: 'John F', 
    username: 'john' , 
    image : '2.jpg'
    name: 'John F', 
    username: 'john' , 
    image : '3.jpg'

The default CSS styles for the autocomplete list.

.mention-lookup-nt {
  width: 500px;
.mention-lookup-nt ul {
  color: #ccc;
  list-style-type: none;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  overflow: auto;
  padding-left: 5px;
  margin-top: 10px;
.mention-lookup-nt li {
  padding-top: 10px;
  padding-bottom: 10px;
.mention-li-nt div {
  font: 12px/1.5 Helvetica, Verdana ,sans-serif;
  padding-left: 60px;
  color: #555;
.mention-li-nt img {
  position: absolute;
  width: 50px; 
  height: 40px;
.mention-li-nt:hover {
  background: #eee;
  cursor: pointer;

You Might Be Interested In:

One thought on “@mention Autocomplete In ES6 JS

Leave a Reply