Author: | sean-codes |
---|---|
Views Total: | 7,589 views |
Official Page: | Go to website |
Last Update: | December 29, 2017 |
License: | MIT |
Preview:

Description:
js-mention is a small JavaScript plugin that adds the @mention autocomplete functionality to a text field you specify. Can be used to mention someone in a text message.
How to use it:
Insert the main JavaScript file ‘mention.js’ into the document when needed.
<script src="mention.js"></script>
Create a normal textarea element where you want to append the @mention autocomplete list to.
<textarea></textarea>
Specify the suggestions for the autocomplete list.
var myMention = new Mention({ selector: 'textarea', options: ['CSS', 'Script', '.Com'] })
Style the autocomplete list in the CSS.
.mention-wrapper { position: relative; display: block; width: 100%; height: 100%; } .mention-wrapper textarea { color: rgba(0, 0, 0, 0.1); } .mention-display { color: rgba(0, 0, 0, 0.9); position: absolute; display: inline-block; box-sizing: border-box; pointer-events: none; width: 100%; height: 100%; top: 0px; left: 0px; border-radius: 4px; word-break: break-word; -moz-appearance: textfield-multiline; -webkit-appearance: textarea; font: medium -moz-fixed; font: -webkit-small-control; border: 3px solid transparent; padding: 10px; font-size: 16px; } .mention-options { position: absolute; pointer-events: none; opacity: 0; color: rgba(0, 0, 0, 0.9); width: 100%; border: 3px solid transparent; box-sizing: border-box; } .mention-options.show { pointer-events: initial; opacity: 1; } .mention-options .mention-option { padding: 5px 10px; background: #FFF; position: relative; cursor: pointer; display: none; } .mention-options .mention-option:hover:after, .mention-options .mention-option.active:after { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); pointer-events: none; cursor: pointer; } .mention-options .mention-option.show { display: block; }