offload search to lunr.js

frontend/components/Form/Autocomplete2.vue

@@ -61,6 +61,7 @@
 </template>
 
 <script setup lang="ts">
+  import lunr from "lunr";
   import {
     Combobox,
     ComboboxInput,
@@ -126,42 +127,33 @@
     return "";
   }
 
-  const computedItems = computed<ComboItem[]>(() => {
+  const index = lunr(function () {
-    const list: ComboItem[] = [];
+    this.ref("id");
+    this.field("display");
 
     for (let i = 0; i < props.items.length; i++) {
       const item = props.items[i];
+      const display = extractDisplay(item);
+      this.add({ id: i, display });
+    }
+  });
 
-      const out: Partial<ComboItem> = {
+  watchEffect(() => {
-        id: i,
+    if (props.modelValue) {
-        value: item,
+      search.value = extractDisplay(props.modelValue);
-      };
+    }
+  });
 
-      switch (typeof item) {
+  const computedItems = computed<ComboItem[]>(() => {
-        case "string":
+    const list: ComboItem[] = [];
-          out.display = item;
-          break;
-        case "object":
-          // @ts-ignore - up to the user to provide a valid display key
-          out.display = item[props.display] as string;
-          break;
-        default:
-          out.display = "";
-          break;
-      }
 
-      if (search.value && out.display) {
+    const matches = index.search("*" + search.value + "*");
-        const foldSearch = search.value.toLowerCase();
-        const foldDisplay = out.display.toLowerCase();
 
-        if (foldDisplay.startsWith(foldSearch)) {
+    for (let i = 0; i < matches.length; i++) {
-          list.push(out as ComboItem);
+      const match = matches[i];
-        }
+      const item = props.items[parseInt(match.ref)];
-
+      const display = extractDisplay(item);
-        continue;
+      list.push({ id: i, display, value: item });
-      }
-
-      list.push(out as ComboItem);
     }
 
     return list;

frontend/package.json

@@ -41,6 +41,7 @@
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.5.2",
     "@tailwindcss/typography": "^0.5.4",
+    "@types/lunr": "^2.3.7",
     "@vuepic/vue-datepicker": "^8.1.1",
     "@vueuse/nuxt": "^10.0.0",
     "@vueuse/router": "^10.0.0",
@@ -50,6 +51,7 @@
     "dompurify": "^3.0.0",
     "h3": "^1.7.1",
     "http-proxy": "^1.18.1",
+    "lunr": "^2.3.9",
     "markdown-it": "^14.0.0",
     "pinia": "^2.0.21",
     "postcss": "^8.4.16",

frontend/pnpm-lock.yaml

@@ -26,6 +26,9 @@ dependencies:
   '@tailwindcss/typography':
     specifier: ^0.5.4
     version: 0.5.8(tailwindcss@3.2.4)
+  '@types/lunr':
+    specifier: ^2.3.7
+    version: 2.3.7
   '@vuepic/vue-datepicker':
     specifier: ^8.1.1
     version: 8.1.1(vue@3.3.4)
@@ -53,6 +56,9 @@ dependencies:
   http-proxy:
     specifier: ^1.18.1
     version: 1.18.1
+  lunr:
+    specifier: ^2.3.9
+    version: 2.3.9
   markdown-it:
     specifier: ^14.0.0
     version: 14.0.0
@@ -2797,6 +2803,10 @@ packages:
     resolution: {integrity: sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==}
     dev: true
 
+  /@types/lunr@2.3.7:
+    resolution: {integrity: sha512-Tb/kUm38e8gmjahQzdCKhbdsvQ9/ppzHFfsJ0dMs3ckqQsRj+P5IkSAwFTBrBxdyr3E/LoMUUrZngjDYAjiE3A==}
+    dev: false
+
   /@types/markdown-it@13.0.2:
     resolution: {integrity: sha512-Tla7hH9oeXHOlJyBFdoqV61xWE9FZf/y2g+gFVwQ2vE1/eBzjUno5JCd3Hdb5oATve5OF6xNjZ/4VIZhVVx+hA==}
     dependencies:
@@ -6586,6 +6596,10 @@ packages:
     dependencies:
       yallist: 4.0.0
 
+  /lunr@2.3.9:
+    resolution: {integrity: sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==}
+    dev: false
+
   /magic-string-ast@0.1.2:
     resolution: {integrity: sha512-P53AZrzq7hclCU6HWj88xNZHmP15DKjMmK/vBytO1qnpYP3ul4IEZlyCE0aU3JRnmgWmZPmoTKj4Bls7v0pMyA==}
     engines: {node: '>=14.19.0'}