From 54eed24e763d5b64370d03d605c653981a7a1f6b Mon Sep 17 00:00:00 2001
From: Thomas <thomas@lekoala.be>
Date: Tue, 28 Dec 2021 11:26:10 +0100
Subject: [PATCH] multiple separator support

---
 demo.html | 4 ++--
 readme.md | 4 ++--
 tags.js   | 5 +++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/demo.html b/demo.html
index 0d5d055..b2943c6 100644
--- a/demo.html
+++ b/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>
diff --git a/readme.md b/readme.md
index 5412a62..6d867df 100644
--- a/readme.md
+++ b/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>
 ```
diff --git a/tags.js b/tags.js
index b908459..b0ddbfb 100644
--- a/tags.js
+++ b/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) {