Notes on everything: Create mention tags

Saturday, October 14, 2017

Create mention tags

This is the html, css, js to create mention tags like slack.
To download all of them, see the github page.

<html>
<head>
<LINK rel="stylesheet" type="text/css" href="./css/textarealike.css">
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>Something here</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div contenteditable="true" class="form-control" style="overflow:auto;height:100px;" id="div-content"></div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
crossorigin="anonymous"></script>
<script src="./js/jquery.textcomplete.min.js"></script>
<script>
$(function($){
$("[contenteditable]").focusout(function(){
var element = $(this);
if (!element.text().trim().length) {
element.empty();
}
});
});
$(document).ready(function () {
$('#div-content').textcomplete([
{
id: 'members',
words: ['@john', '@jack', '@fredrick', '@ben', '@alice', '@anna', '@anne', '@all'],
match: /\B(\S{1,})$/,
search: function (term, callback) {
callback($.map(this.words, function (word) {
return word.indexOf(term) === 0 ? word : null;
}));
},
index: 1,
replace: function (word) {
return '<member name="mention-tag" class="mention-tag" contenteditable="false">' + word + ' </member> ';
}
}
], {
onKeydown: function (e, commands) {
if (e.ctrlKey && e.keyCode === 74) { // CTRL-J
return commands.KEY_ENTER;
}
},
placement: 'top'
});
});
</script>
</body>
</html>