const instance = new AutoSuggest({
caseSensitive: false,
onChange: function(suggestion) {
console.log(`"${suggestion.insertHtml || suggestion.insertText}" has been inserted into #${this.id}`);
},
suggestions: [
{
trigger: '<',
values: [
{
value: 'script',
insertText: '',
focusText: [-25, -11],
insertHtml: '<script type="text/javascript" src="path/to/jsfile"></script>',
focusHtml: [-25, -11],
},
{
value: 'link',
insertText: '',
focusText: [-36, -21],
insertHtml: '<link href="path/to/cssfile" rel="stylesheet" />',
focusHtml: [-36, -21],
}
]
}, {
trigger: '@',
values: [
{
on: ['avcs', 'cham', 'chandu'],
show: 'Chandrasekhar Ambula V',
insertText: '@AmbulaV',
insertHtml: '@AmbulaV'
},
{
on: ['pj'],
show: 'Peter John',
insertText: '@John',
insertHtml: '@John'
}
]
}, {
trigger: '//',
caseSensitive: true,
values: ['hello', 'world', 'idiot', 'peter', 'pro', 'avcs']
}, function (keyword, callback) {
const keyword = $0.toLowerCase();
const results = [];
let dataset = this.value || this.textContent;
dataset = dataset.toLowerCase().split(/[^a-zA-Z0-9_]+/);
dataset.forEach(function(word) {
if (
word.length >= 4 &&
!word.indexOf(keyword) &&
word !== keyword &&
results.indexOf(word) === -1
) {
results.push(word);
}
});
setTimeout(() => {
callback(results);
}, 300);
}
]
}, $('#input'), document.getElementById('textarea'));
instance.addInputs(document.getElementById('contenteditable'));
// instance.removeInputs(document.getElementById('input'));
// instance.destroy(); // removes autosuggest from all inputs
|
