]>
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 | 6 | const tagsSeparatorElement = document.querySelector('input[name="tags_separator"]'); |
8a1ce1da | 7 | const tagsSeparator = tagsSeparatorElement ? tagsSeparatorElement.value || ' ' : ' '; |
df9aac5b | 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, | |
8a1ce1da A |
15 | input.match(new RegExp(`[^${tagsSeparator}]*$`))[0], |
16 | ); | |
df9aac5b A |
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]); | |
8a1ce1da | 24 | |
df9aac5b | 25 | // Don't display already selected items |
8a1ce1da A |
26 | // WARNING: pseudo classes does not seem to work with string litterals... |
27 | const reg = new RegExp(`([^${tagsSeparator}]+)${tagsSeparator}`, 'g'); | |
df9aac5b A |
28 | let match; |
29 | awesome.data = (item, input) => { | |
30 | while ((match = reg.exec(input))) { | |
31 | if (item === match[1]) { | |
32 | return ''; | |
49bc541d | 33 | } |
a33c5653 | 34 | } |
df9aac5b A |
35 | return item; |
36 | }; | |
37 | awesome.minChars = 1; | |
a33c5653 A |
38 | }); |
39 | })(); |