js-mention is a JavaScript plugin that adds said autocomplete functionality to a text field you specify. They can be used to refer to someone in a text message.
auto suggestion in textarea, jquery mentions autocomplete, javascript mentions, autocomplete js, mention in textarea
How to make use of it:
1. Insert the main JavaScript file “mention.js
” into the document when needed.
<script src="mention.js"></script>
2. Create a Textarea element where you want to append the autocomplete list.
<textarea></textarea>
3. Select Suggestions for the autocomplete list.
var myMention = new Mention({ selector: 'textarea', options: ['Web', 'Code', 'Flow'] })
4. CSS autocomplete list style.
.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; }
mention autocomplete for text field, js-mention Plugin/Github
See Demo And Download
Official Website(sean-codes): Click Here
This superior jQuery/javascript plugin is developed by sean-codes. For extra advanced usage, please go to the official website.
Be First to Comment