Faster search with minisearch

components/SearchBar.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import { useRouter } from "next/router";
 import type mapboxgl from "mapbox-gl";
-import Fuse from "fuse.js";
+import MiniSearch, { SearchResult } from "minisearch";
 import useSWRImmutable from "swr/immutable";
 
 import styles from "../styles/SearchBar.module.css";
@@ -17,11 +17,6 @@ interface Mod {
   id: number;
 }
 
-interface SearchResult {
-  item: Mod;
-  refIndex: number;
-}
-
 const jsonFetcher = async (url: string): Promise<Mod | null> => {
   const res = await fetch(url);
 
@@ -38,9 +33,9 @@ const jsonFetcher = async (url: string): Promise<Mod | null> => {
 const SearchBar: React.FC<Props> = ({ clearSelectedCell, map }) => {
   const router = useRouter();
 
-  const fuse = useRef<Fuse<Mod> | null>(null) as React.MutableRefObject<
-    Fuse<Mod>
-  >;
+  const searchEngine = useRef<MiniSearch<Mod> | null>(
+    null
+  ) as React.MutableRefObject<MiniSearch<Mod>>;
 
   const { data, error } = useSWRImmutable(
     `https://mods.modmapper.com/mod_search_index.json`,
@@ -48,8 +43,16 @@ const SearchBar: React.FC<Props> = ({ clearSelectedCell, map }) => {
   );
 
   useEffect(() => {
-    if (data && !fuse.current) {
-      fuse.current = new Fuse(data as unknown as Mod[], { keys: ["name"] });
+    if (data && !searchEngine.current) {
+      searchEngine.current = new MiniSearch({
+        fields: ["name"],
+        storeFields: ["name", "id"],
+        searchOptions: {
+          fields: ["name"],
+          fuzzy: 0.2,
+        },
+      });
+      searchEngine.current.addAll(data as unknown as Mod[]);
     }
   }, [data]);
 
@@ -77,8 +80,8 @@ const SearchBar: React.FC<Props> = ({ clearSelectedCell, map }) => {
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
-    if (fuse.current) {
-      const results: { item: Mod; refIndex: number }[] = fuse.current.search(
+    if (searchEngine.current) {
+      const results: SearchResult[] = searchEngine.current.search(
         e.target.value
       );
       setResults(results);
@@ -122,12 +125,12 @@ const SearchBar: React.FC<Props> = ({ clearSelectedCell, map }) => {
         <ul className={styles["search-results"]}>
           {results.map((result) => (
             <li
-              key={result.item.id}
-              onClick={onChooseResult(result.item)}
+              key={result.id}
+              onClick={onChooseResult({ id: result.id, name: result.name })}
               onTouchStart={() => setClickingResult(true)}
               onMouseDown={() => setClickingResult(true)}
             >
-              {result.item.name}
+              {result.name}
             </li>
           ))}
         </ul>

package-lock.json

@@ -1210,11 +1210,6 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
-    "fuse.js": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.5.3.tgz",
-      "integrity": "sha512-sA5etGE7yD/pOqivZRBvUBd/NaL2sjAu6QuSaFoe1H2BrJSkH/T/UXAJ8CdXdw7DvY3Hs8CXKYkDWX7RiP5KOg=="
-    },
     "geojson-vt": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
@@ -1716,6 +1711,11 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
     },
+    "minisearch": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/minisearch/-/minisearch-3.2.0.tgz",
+      "integrity": "sha512-Nq3o/a9mhvokHXKCS9zxAd0t1z/eSjdtmvfBfvGI2D0/Fx8xUjrOdpjqbU7DXRyH8obowhELR1+L+i3TV7Y21g=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

package.json

@@ -11,9 +11,9 @@
     "@types/javascript-color-gradient": "^1.3.0",
     "@types/mapbox-gl": "^2.6.0",
     "date-fns": "^2.28.0",
-    "fuse.js": "^6.5.3",
     "javascript-color-gradient": "^1.3.2",
     "mapbox-gl": "^2.6.1",
+    "minisearch": "^3.2.0",
     "next": "12.0.8",
     "react": "17.0.2",
     "react-dom": "17.0.2",