multiple separator support

demo.html

@@ -108,8 +108,8 @@ <h1>Demo</h1>
       </div>
       <div class="row mb-3 g-3">
         <div class="col-md-4">
-          <label for="separatorTags" class="form-label">Tags (with space separator)</label>
-          <select class="form-select" id="separatorTags" name="tags_separator[]" multiple data-allow-new="true" data-separator=" ">
+          <label for="separatorTags" class="form-label">Tags (with space and comma separator)</label>
+          <select class="form-select" id="separatorTags" name="tags_separator[]" multiple data-allow-new="true" data-separator=" |,|  ">
             <option value="">Type a tag...</option><!-- you need at least one option with the placeholder -->
           </select>
         </div>

readme.md

@@ -62,10 +62,10 @@ Use attribute `data-regex` to force new tags to match a given regex.
 <select class="form-select" id="tags-input" name="tags[]" multiple data-regex=".*@mycompany\.com$"></select>
 ```
 
-Use attribute `data-separator` to split new tags based on a given separator
+Use attribute `data-separator` to split new tags based on a given separator. You can add multiple separators with |.
 
 ```html
-<select class="form-select" id="tags-input" name="tags[]" multiple data-separator=" ">
+<select class="form-select" id="tags-input" name="tags[]" multiple data-separator=" |,">
     <option disabled hidden value="">Type a tag...</option>
 </select>
 ```

tags.js

@@ -34,7 +34,7 @@ class Tags {
     this.liveServer = selectElement.dataset.liveServer ? true : false;
     this.suggestionsThreshold = selectElement.dataset.suggestionsThreshold ? parseInt(selectElement.dataset.suggestionsThreshold) : 1;
     this.validationRegex = selectElement.dataset.regex || "";
-    this.separator = selectElement.dataset.separator || null;
+    this.separator = selectElement.dataset.separator ? selectElement.dataset.separator.split("|") : [];
     this.max = selectElement.dataset.max ? parseInt(selectElement.dataset.max) : null;
     this.keyboardNavigation = false;
     this.clearLabel = opts.clearLabel || "Clear";
@@ -183,6 +183,7 @@ class Tags {
       if (!initialValue.value) {
         continue;
       }
+      // track initial values for reset
       initialValue.dataset.init = 1;
       this.addItem(initialValue.innerText, initialValue.value);
     }
@@ -226,7 +227,7 @@ class Tags {
     this.searchInput.addEventListener("keydown", (event) => {
       // Keycode reference : https://css-tricks.com/snippets/javascript/javascript-keycodes/
       let key = event.keyCode || event.key;
-      if (this.separator && event.key == this.separator) {
+      if (this.separator.length && this.separator.includes(event.key)) {
         event.preventDefault();
         let res = this.addItem(this.searchInput.value, null);
         if (res) {