preselect values

demo.html

@@ -356,7 +356,23 @@ <h1>Demo</h1>
         </div>
         <div class="row mb-3 g-3">
           <div class="col-md-4">
-            <label for="validationTagsJson" class="form-label">Tags (live server side + keep open)</label>
+            <label for="serverSideTags" class="form-label">Tags (onload server side + preselected values)</label>
+            <select
+              class="form-select"
+              id="serverSideTags"
+              name="server_side_tags[]"
+              multiple
+              data-allow-new="true"
+              data-server="demo.json"
+              data-selected="server1,server2"
+            >
+              <option disabled hidden value="">Choose a tag...</option>
+            </select>
+          </div>
+        </div>
+        <div class="row mb-3 g-3">
+          <div class="col-md-4">
+            <label for="validationTagsJson" class="form-label">Tags (live server side + keep open + full width)</label>
             <select
               class="form-select"
               id="validationTagsJson"

demo.json

@@ -5,15 +5,16 @@
   },
   {
     "value": "server2",
-    "label": "Server Orange",
+    "label": "Server 2 Orange",
     "data": {
       "badgeStyle": "warning",
       "badgeClass": "text-dark"
     }
   },
   {
     "value": "server3",
-    "label": "Server 3"
+    "label": "Server 3",
+    "selected": true
   },
   {
     "value": "af",

readme.md

@@ -52,6 +52,8 @@ You can also use options provided by the server. This script expects a json resp
 Simply set `data-server` where your endpoint is located. It should provide an array of value/label objects. The suggestions will be populated upon init
 except if `data-live-server` is set, in which case, it will be populated on type. A ?query= parameter is passed along with the current value of the searchInput.
 
+You can preselect values either by using `data-selected` or by marking the suggestion as `selected` in the json result.
+
 ```html
 <label for="validationTagsJson" class="form-label">Tags (server side)</label>
 <select
@@ -80,6 +82,7 @@ Options can be either passed to the constructor (eg: optionName) or in data-opti
 | server               | ''             | Point to a given endpoint that should provide the list of suggestions                           |
 | liveServer           | false          | Should the endpoint be called dynamically when typing                                           |
 | serverParams         | {}             | Additionnal params to pass alongside the query parameter                                        |
+| selected             | ''             | A comma separated list of selected values                                                       |
 | suggestionsThreshold | 1              | How many chars are needed before showing suggestions (0 to open immediately)                    |
 | validationRegex      | false          | Regex for new tags                                                                              |
 | separator            | ''             | A list (pipe separated) of characters that should act as separator (default is using enter key) |

tags.js

@@ -45,6 +45,7 @@ class Tags {
     if (typeof this.serverParams == "string") {
       this.serverParams = JSON.parse(this.serverParams);
     }
+    this.selected = opts.selected ? opts.selected.split(",") : [];
     this.suggestionsThreshold = typeof opts.suggestionsThreshold != "undefined" ? parseInt(opts.suggestionsThreshold) : 1;
     this.validationRegex = opts.regex || "";
     this.separator = opts.separator ? opts.separator.split("|") : [];
@@ -520,6 +521,13 @@ class Tags {
       if (!suggestion[this.valueField]) {
         continue;
       }
+
+      // initial selection
+      if (suggestion.selected || this.selected.includes(suggestion[this.valueField])) {
+        this._add(suggestion[this.labelField], suggestion[this.valueField], suggestion.data);
+        continue; // no need to add as suggestion
+      }
+
       let newChild = document.createElement("li");
       let newChildLink = document.createElement("a");
       newChild.append(newChildLink);
@@ -554,8 +562,7 @@ class Tags {
       });
       newChildLink.addEventListener("click", (event) => {
         event.preventDefault();
-        let text = newChildLink.textContent;
-        this._add(text, newChildLink.getAttribute(VALUE_ATTRIBUTE), newChildLink.dataset);
+        this._add(newChildLink.textContent, newChildLink.getAttribute(VALUE_ATTRIBUTE), newChildLink.dataset);
       });
     }
   }