]>
Commit | Line | Data |
---|---|---|
a33c5653 A |
1 | import Awesomplete from 'awesomplete'; |
2 | import 'awesomplete/awesomplete.css'; | |
49bc541d | 3 | |
a33c5653 | 4 | (() => { |
a33c5653 | 5 | const autocompleteFields = document.querySelectorAll('input[data-multiple]'); |
df9aac5b A |
6 | const tagsSeparatorElement = document.querySelector('input[name="tags_separator"]'); |
7 | const tagsSeparator = tagsSeparatorElement ? tagsSeparatorElement.value || " " : " "; | |
8 | ||
a33c5653 | 9 | [...autocompleteFields].forEach((autocompleteField) => { |
df9aac5b | 10 | const awesome = new Awesomplete(Awesomplete.$(autocompleteField)); |
a33c5653 | 11 | |
df9aac5b A |
12 | // Tags are separated by separator |
13 | awesome.filter = (text, input) => Awesomplete.FILTER_CONTAINS( | |
14 | text, | |
15 | input.match(new RegExp(`[^${tagsSeparator}]*$`))[0]) | |
16 | ; | |
17 | // Insert new selected tag in the input | |
18 | awesome.replace = (text) => { | |
19 | const before = awesome.input.value.match(new RegExp(`^.+${tagsSeparator}+|`))[0]; | |
20 | awesome.input.value = `${before}${text}${tagsSeparator}`; | |
21 | }; | |
22 | // Highlight found items | |
23 | awesome.item = (text, input) => Awesomplete.ITEM(text, input.match(new RegExp(`[^${tagsSeparator}]*$`))[0]); | |
24 | // Don't display already selected items | |
25 | const reg = new RegExp(`/(\w+)${tagsSeparator}/g`); | |
26 | let match; | |
27 | awesome.data = (item, input) => { | |
28 | while ((match = reg.exec(input))) { | |
29 | if (item === match[1]) { | |
30 | return ''; | |
49bc541d | 31 | } |
a33c5653 | 32 | } |
df9aac5b A |
33 | return item; |
34 | }; | |
35 | awesome.minChars = 1; | |
a33c5653 A |
36 | }); |
37 | })(); |