@mention Autocomplete In ES6 JS

Preview:

Description:

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:

• @Mention Autocomplete For Text Field – js-mention

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>

mention({
  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;
  width:225px;
  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;
}