support nested data key

lekoala · Nov 29, 2023 · de9b420 · de9b420
1 parent bf10109
commit de9b420
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 4 deletions.
diff --git a/autocomplete.js b/autocomplete.js
@@ -246,6 +246,10 @@ function zwijit(el) {
     .join("");
 }
 
+function nested(str, obj = "window") {
+  return str.split(".").reduce((r, p) => r[p], obj);
+}
+
 // #endregion
 
 class Autocomplete {
@@ -806,7 +810,7 @@ class Autocomplete {
 
     if (this._config.highlightTyped) {
       const idx = normalize(label).indexOf(lookup);
-      if(idx !== -1){
+      if (idx !== -1) {
         label =
           label.substring(0, idx) +
           `<mark class="${this._config.highlightClass}">${label.substring(idx, idx + lookup.length)}</mark>` +
@@ -1196,7 +1200,7 @@ class Autocomplete {
     fetch(url, fetchOptions)
       .then((r) => this._config.onServerResponse(r, this))
       .then((suggestions) => {
-        const data = suggestions[this._config.serverDataKey] || suggestions;
+        const data = nested(this._config.serverDataKey, suggestions) || suggestions;
         this.setData(data);
         this._setHiddenVal();
         this._abortController = null;

diff --git a/demo-nested.json b/demo-nested.json
@@ -0,0 +1,29 @@
+{
+    "status": "success",
+    "data": {
+        "total": 3,
+        "items": [
+            {
+                "id": "981617517",
+                "name": "EQUINOR BIL OSLO",
+                "highlight": "\\u003cmark\\u003e\\u003cb\\u003eEQUINOR\\u003c/b\\u003e\\u003c/mark\\u003e \\u003cmark\\u003e\\u003cb\\u003eB\\u003c/b\\u003eIL\\u003c/mark\\u003e OSLO",
+                "code": "FLI",
+                "score": 46.73977867834532
+            },
+            {
+                "id": "993015253",
+                "name": "EQUINOR BIL BERGEN",
+                "highlight": "\\u003cmark\\u003e\\u003cb\\u003eEQUINOR\\u003c/b\\u003e\\u003c/mark\\u003e \\u003cmark\\u003e\\u003cb\\u003eB\\u003c/b\\u003eIL\\u003c/mark\\u003e \\u003cmark\\u003e\\u003cb\\u003eB\\u003c/b\\u003eERGEN\\u003c/mark\\u003e",
+                "code": "FLI",
+                "score": 46.581858857682334
+            },
+            {
+                "id": "999145671",
+                "name": "EQUINOR BERGEN BÅTLAG",
+                "highlight": "\\u003cmark\\u003e\\u003cb\\u003eEQUINOR\\u003c/b\\u003e\\u003c/mark\\u003e \\u003cmark\\u003e\\u003cb\\u003eB\\u003c/b\\u003eERGEN\\u003c/mark\\u003e \\u003cmark\\u003e\\u003cb\\u003eB\\u003c/b\\u003eÅTLAG\\u003c/mark\\u003e",
+                "code": "FLI",
+                "score": 44.4037772735859
+            }
+        ]
+    }
+}
diff --git a/demo.html b/demo.html
@@ -65,6 +65,15 @@
         },
       });
     }
+    // test for fuzzy
+    src.push({
+      title: "Sümething",
+      id: "fuzzy1"
+    })
+    src.push({
+      title: "Sómething",
+      id: "fuzzy2"
+    })
 
     var groupedSrc = [];
     for (let i = 0; i < 5; i++) {
@@ -274,9 +283,10 @@ <h1>Demo</h1>
           <div class="input-group mb-3">
             <button class="btn btn-outline-secondary" type="button" id="button-clear">Clear</button>
             <input type="text" class="form-control autocomplete" name="autocompleteInputZero" id="autocompleteInputZero"
-            data-suggestions-threshold="0" data-active-classes="my,test,classes" data-clear-control="#button-clear" data-fixed="true" data-fuzzy="true" placeholder="Type something" />
+              data-suggestions-threshold="0" data-active-classes="my,test,classes" data-clear-control="#button-clear" data-fixed="true"
+              data-fuzzy="true" placeholder="Type something" />
           </div>
-        
+
         </div>
       </div>
       <div class="row mb-3 g-3">
@@ -518,6 +528,15 @@ <h1>Demo</h1>
         </div>
       </div>
 
+      <div class="row mb-3">
+        <div class="mb-3">
+          <label for="elect-remote-nested-remote" class="form-label">Nested data key</label>
+          <input type="text" name="remote_nested" class="form-control autocomplete" id="select-remote-nested" placeholder="Type something"
+            data-full-width="1" data-server="demo-nested.json" data-server-data-key="data.items" data-hidden-input="true"
+            data-label-field="name" data-value-field="id" data-query-param="q" data-live-server="true" />
+        </div>
+      </div>
+
       <!-- Button trigger modal -->
       <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Works in modals too</button>