2018-02-24 18:30:30 +01:00
|
|
|
import Awesomplete from 'awesomplete';
|
|
|
|
import 'awesomplete/awesomplete.css';
|
2017-04-03 19:23:30 +02:00
|
|
|
|
2018-02-24 18:30:30 +01:00
|
|
|
(() => {
|
|
|
|
const awp = Awesomplete.$;
|
|
|
|
const autocompleteFields = document.querySelectorAll('input[data-multiple]');
|
|
|
|
[...autocompleteFields].forEach((autocompleteField) => {
|
|
|
|
const awesomplete = new Awesomplete(awp(autocompleteField));
|
|
|
|
awesomplete.filter = (text, input) => Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]);
|
|
|
|
awesomplete.replace = (text) => {
|
|
|
|
const before = awesomplete.input.value.match(/^.+ \s*|/)[0];
|
|
|
|
awesomplete.input.value = `${before}${text} `;
|
|
|
|
};
|
|
|
|
awesomplete.minChars = 1;
|
|
|
|
|
|
|
|
autocompleteField.addEventListener('input', () => {
|
|
|
|
const proposedTags = autocompleteField.getAttribute('data-list').replace(/,/g, '').split(' ');
|
|
|
|
const reg = /(\w+) /g;
|
|
|
|
let match;
|
|
|
|
while ((match = reg.exec(autocompleteField.value)) !== null) {
|
|
|
|
const id = proposedTags.indexOf(match[1]);
|
|
|
|
if (id !== -1) {
|
|
|
|
proposedTags.splice(id, 1);
|
2017-04-03 19:23:30 +02:00
|
|
|
}
|
2018-02-24 18:30:30 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
awesomplete.list = proposedTags;
|
2017-04-03 19:23:30 +02:00
|
|
|
});
|
2018-02-24 18:30:30 +01:00
|
|
|
});
|
|
|
|
})();
|