@mention Autocomplete In ES6 JS

Category: Form , Javascript | December 12, 2018
Author: leweekend
Views Total: 315
Official Page: Go to website
Last Update: December 12, 2018
License: MIT

Preview:

@mention Autocomplete In ES6 JS

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:

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;
}

You Might Be Interested In:


One thought on “@mention Autocomplete In ES6 JS

Leave a Reply