use fixed search key + add reset from init

lekoala · Nov 22, 2023 · b9ba8df · b9ba8df
1 parent c8d3537
commit b9ba8df
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/demo.html b/demo.html
@@ -841,6 +841,33 @@ <h1>Demo</h1>
             <button id="setitem3">Set item with server</button>
           </div>
         </div>
+        <div class="row mb-3 g-3">
+          <div class="col-md-4">
+            <label for="searchFieldsTags" class="form-label">Tags with custom search fields</label>
+            <select class="form-select" id="searchFieldsTags" name="searchFieldsTags[]">
+            </select>
+            <script type="module">
+              import Tags from "./tags.js";
+
+              const data = [
+                { QIP_NO: "0001", QIP_NAME: "A", QIP_Product: "X" },
+                { QIP_NO: "0002", QIP_NAME: "B", QIP_Product: "Y" },
+                { QIP_NO: "0003", QIP_NAME: "C", QIP_Product: "Z" }
+              ];
+
+              // Init can reset instance
+              Tags.init("#searchFieldsTags", {
+                items: data,
+                labelField: "QIP_NAME",
+                valueField: "QIP_NO",
+                searchFields: ["QIP_NO", "QIP_NAME", "QIP_Product"],
+                onRenderItem: (item) => `${item.QIP_NO}-${item.QIP_NAME}-${item.QIP_Product}`
+              }, true)
+            </script>
+          </div>
+          <div class="col-md-4">
+          </div>
+        </div>
         <div class="row mb-3 g-3">
           <div class="col-md-4">
             <label for="serverSideTagsSingle" class="form-label">Tags (onload server side + single value)</label>

diff --git a/tags.js b/tags.js
@@ -468,16 +468,21 @@ class Tags {
    * Attach to all elements matched by the selector
    * @param {string} selector
    * @param {Object} opts
+   * @param {Boolean} reset
    */
-  static init(selector = "select[multiple]", opts = {}) {
+  static init(selector = "select[multiple]", opts = {}, reset = false) {
     /**
      * @type {NodeListOf<HTMLSelectElement>}
      */
     let list = document.querySelectorAll(selector);
     for (let i = 0; i < list.length; i++) {
-      if (Tags.getInstance(list[i])) {
+      const inst = Tags.getInstance(list[i]);
+      if (inst && !reset) {
         continue;
       }
+      if (inst) {
+        inst.dispose();
+      }
       new Tags(list[i], opts);
     }
   }
@@ -1440,9 +1445,12 @@ class Tags {
     }
     newChildLink.setAttribute(VALUE_ATTRIBUTE, value);
     newChildLink.dataset.label = label;
+
+    const searchData = {};
     this._config.searchFields.forEach((sf) => {
-      newChild.dataset[sf] = suggestion[sf];
+      searchData[sf] = suggestion[sf];
     });
+    newChildLink.dataset.searchData = JSON.stringify(searchData);
     newChildLink.setAttribute("href", "#");
     newChildLink.innerHTML = textContent;
     this._dropElement.appendChild(newChild);
@@ -1690,8 +1698,9 @@ class Tags {
       let isMatched = lookup.length == 0 && this._config.suggestionsThreshold === 0;
       if (!showAllSuggestions && lookup.length > 0) {
         // match on any field
+        const searchData = JSON.parse(link.dataset.searchData);
         this._config.searchFields.forEach((sf) => {
-          const text = normalize(link.dataset[sf]);
+          const text = normalize(searchData[sf]);
           let found = false;
           if (this._config.fuzzy) {
             found = fuzzyMatch(text, lookup);