-window.onload = function () {
- var continent = document.getElementById('continent');
- var city = document.getElementById('city');
- if (continent != null && city != null) {
- continent.addEventListener('change', function(event) {
- hideTimezoneCities(city, continent.options[continent.selectedIndex].value, true);
- });
- hideTimezoneCities(city, continent.options[continent.selectedIndex].value, false);
- }
-};
+import Awesomplete from 'awesomplete';
+import 'awesomplete/awesomplete.css';
-/**
- * Add the class 'hidden' to city options not attached to the current selected continent.
- *
- * @param cities List of <option> elements
- * @param currentContinent Current selected continent
- * @param reset Set to true to reset the selected value
- */
-function hideTimezoneCities(cities, currentContinent, reset = false) {
- var first = true;
- [].forEach.call(cities, function(option) {
- if (option.getAttribute('data-continent') != currentContinent) {
- option.className = 'hidden';
- } else {
- option.className = '';
- if (reset === true && first === true) {
- option.setAttribute('selected', 'selected');
- first = false;
- }
+(() => {
+ const autocompleteFields = document.querySelectorAll('input[data-multiple]');
+ const tagsSeparatorElement = document.querySelector('input[name="tags_separator"]');
+ const tagsSeparator = tagsSeparatorElement ? tagsSeparatorElement.value || ' ' : ' ';
+
+ [...autocompleteFields].forEach((autocompleteField) => {
+ const awesome = new Awesomplete(Awesomplete.$(autocompleteField));
+
+ // Tags are separated by separator
+ awesome.filter = (text, input) => Awesomplete.FILTER_CONTAINS(
+ text,
+ input.match(new RegExp(`[^${tagsSeparator}]*$`))[0],
+ );
+ // Insert new selected tag in the input
+ awesome.replace = (text) => {
+ const before = awesome.input.value.match(new RegExp(`^.+${tagsSeparator}+|`))[0];
+ awesome.input.value = `${before}${text}${tagsSeparator}`;
+ };
+ // Highlight found items
+ awesome.item = (text, input) => Awesomplete.ITEM(text, input.match(new RegExp(`[^${tagsSeparator}]*$`))[0]);
+
+ // Don't display already selected items
+ // WARNING: pseudo classes does not seem to work with string litterals...
+ const reg = new RegExp(`([^${tagsSeparator}]+)${tagsSeparator}`, 'g');
+ let match;
+ awesome.data = (item, input) => {
+ while ((match = reg.exec(input))) {
+ if (item === match[1]) {
+ return '';
}
- });
-}
+ }
+ return item;
+ };
+ awesome.minChars = 1;
+ });
+})();