preview site: multiword search

To search for multiple words, separate them with a space. Highlighting also works with multiple words.
react-icons · Jan 11, 2024 · ff36189 · ff36189
1 parent 9d5d0df
commit ff36189
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/preview-astro/src/components/search/index.tsx b/packages/preview-astro/src/components/search/index.tsx
@@ -18,7 +18,13 @@ export function SearchPageComponent() {
   }, []);
 
   if (!isFirstRender && query?.length > 2) {
-    const hightlightPattern = new RegExp(`(${query})`, "i");
+    const hightlightPattern = new RegExp(
+      `(${query
+        .split(" ")
+        .filter((t) => !!t)
+        .join("|")})`,
+      "i",
+    );
     return (
       <>
         <IconDetailModal

diff --git a/packages/preview-astro/src/components/search/search-iconset.tsx b/packages/preview-astro/src/components/search/search-iconset.tsx
@@ -30,7 +30,13 @@ export function SearchIconSet({
 
   const found =
     icons &&
-    Object.keys(icons).filter((name) => name.toLowerCase().includes(query));
+    Object.keys(icons).filter((name) =>
+      query
+        .toLowerCase()
+        .split(" ")
+        .filter((t) => !!t)
+        .every((term) => name.toLowerCase().includes(term)),
+    );
   return (
     <>
       {found ? (