feat(Blog Index / Tag): ✨ Improved Search (Multi-Keyword Searching)

By separate a keyword with space and map & append to Strapi's '$and' with each keyword to a fetch query
bKoZii · Sep 16, 2024 · 2954235 · 2954235
1 parent d9eca1b
commit 2954235
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 22 deletions.
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
@@ -98,6 +98,13 @@ const toast = useToast()
 const nuxt = useNuxtApp()
 const currentPage = ref(1)
 const pageSize = 6
+const constructSearchFilters = (searchInput: string) => {
+  const keywords = searchInput.split(' ')
+  const filters = keywords.map((keyword) => ({
+    $or: [{ title: { $containsi: keyword } }, { subtitle: { $containsi: keyword } }]
+  }))
+  return { $and: filters }
+}
 const {
   data: blogsData,
   status,
@@ -121,9 +128,7 @@ const {
         page: currentPage.value,
         pageSize: pageSize
       },
-      filters: {
-        $or: [{ title: { $containsi: searchInput.value } }, { subtitle: { $containsi: searchInput.value } }]
-      }
+      filters: constructSearchFilters(searchInput.value)
     }),
   {
     deep: false,
@@ -137,7 +142,7 @@ const {
       }
       return null
     }
-  },
+  }
 )
 
 if (error.value) {

diff --git a/pages/blog/tag/[tag].vue b/pages/blog/tag/[tag].vue
@@ -64,28 +64,34 @@ const pageSize = 6
 const searchInput = ref('')
 const loading = ref(false)
 
+const constructSearchFilters = (searchInput: string) => {
+  const keywords = searchInput.split(' ')
+  const filters = keywords.map((keyword) => ({
+    $or: [
+      {
+        categories: {
+          name: {
+            $containsi: tagName
+          }
+        }
+      }
+    ],
+    $and: [
+      {
+        title: {
+          $containsi: keyword
+        }
+      }
+    ]
+  }))
+  return { $and: filters }
+}
+
 const { data: tagBlogs, refresh } = await useAsyncData(
   'tagBlogs',
   () =>
     find<StrapiBlogs>('blogs', {
-      filters: {
-        $or: [
-          {
-            categories: {
-              name: {
-                $containsi: tagName
-              }
-            }
-          }
-        ],
-        $and: [
-          {
-            title: {
-              $containsi: searchInput.value
-            }
-          }
-        ]
-      },
+      filters: constructSearchFilters(searchInput.value),
       fields: ['title', 'subtitle', 'publishedAt', 'slug'],
       sort: 'publishedAt:desc',
       populate: {