assets/vintage/js/base.js

   1 import Awesomplete from 'awesomplete';
   2 import 'awesomplete/awesomplete.css';
   3
   4 (() => {
   5   const autocompleteFields = document.querySelectorAll('input[data-multiple]');
   6   const tagsSeparatorElement = document.querySelector('input[name="tags_separator"]');
   7   const tagsSeparator = tagsSeparatorElement ? tagsSeparatorElement.value || ' ' : ' ';
   8
   9   [...autocompleteFields].forEach((autocompleteField) => {
  10     const awesome = new Awesomplete(Awesomplete.$(autocompleteField));
  11
  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
  25     // Don't display already selected items
  26     // WARNING: pseudo classes does not seem to work with string litterals...
  27     const reg = new RegExp(`([^${tagsSeparator}]+)${tagsSeparator}`, 'g');
  28     let match;
  29     awesome.data = (item, input) => {
  30       while ((match = reg.exec(input))) {
  31         if (item === match[1]) {
  32           return '';
  33         }
  34       }
  35       return item;
  36     };
  37     awesome.minChars = 1;
  38   });
  39 })();