分層式篩選搜尋指南

本指南將解析巢狀分層篩選的概念，並提供使用 Meilisearch 實作的實用技巧。

目錄

什麼是篩選搜尋？
巢狀分層篩選
分層式篩選搜尋的資料建構
使用 Meilisearch 建立分層式篩選搜尋體驗
使用 InstantSearch 和 instant-meilisearch

什麼是篩選搜尋？

篩選搜尋可讓使用者透過廣泛的類別或篩選條件來精煉搜尋結果。這是一種直觀的內容篩選方式，可讓使用者找到符合其確切要求的結果。

以電子商務網站為例。使用者在搜尋產品時，會看到結果列表和一系列篩選條件以協助精煉搜尋。這些篩選條件通常可以在側邊欄中找到。

來自我們的電子商務演示範例

巢狀分層篩選

巢狀篩選條件提供多層結構，可協助使用者透過應用連續篩選條件來瀏覽資料，通常會以分層方式顯示。

巢狀分層篩選條件對於瀏覽和搜尋大型資料集或集合特別有用。使用者可以上下瀏覽各種層級，從而提高可探索性。

想像一下線上購書體驗。使用者可以

1. 從最上層的「書籍」類別開始
2. 選擇「類型」以深入研究
3. 專注於子類型
4. 並透過「作者」、「出版日期」或「評分」等屬性進一步精煉

此類搜尋的基礎在於資料的結構。

分層式篩選搜尋的資料建構

在實作分層式篩選搜尋時，資料文件也需要分層分類，從廣泛類別到更精細類別。

以產品資料集為例

{
    "id": 1,
    "name": "Seagate BarraCuda 1 To (ST1000DM014)",
    "hierarchicalCategories": {
        "lvl0": "Electronics",
        "lvl1": "Electronics > Computer and Tablets",
        "lvl2": "Electronics > Computer and Tablets > Computer Parts",
        "lvl3": "Electronics > Computer and Tablets > Computer Parts > Storage"
    } 
}

每個產品都連結到分層類別，從廣泛到特定，以建立明確的資料路徑。這種有組織的分類對於實作篩選搜尋至關重要，可引導使用者從「電子產品」等一般類別到更精確的類別，例如「電腦零件」中的「儲存裝置」。

使用 Meilisearch 建立分層式篩選搜尋體驗

在 Meilisearch 中，篩選條件是篩選的特定用例。某個項目是篩選條件還是篩選取決於 UX 和 UI 設計。若要能夠根據篩選條件精煉結果，您需要將您想要用作篩選條件的屬性新增至filterableAttributes 清單。從我們的產品範例中，您應該將hierarchicalCategories設定為可篩選。

分層篩選條件通常會使用AND邏輯運算子，因為階層的每個層級都與其他層級共同作用，以逐步縮小搜尋範圍。

範例

• 類別：電子產品
  • 子類別：電腦
    • 品牌：Apple

結果會顯示屬於電子產品類別、電腦子類別且為 Apple 品牌的項目。

建立篩選搜尋介面時，顯示不同篩選條件的結果分配情況會很有幫助。當使用者精煉搜尋時，向他們顯示不同類別中的結果數量可以增強他們的搜尋體驗。

Meilisearch 透過facets搜尋參數支援此功能。當您將 facets 參數新增至您的搜尋查詢時，Meilisearch 會傳回 facetDistribution 物件。此物件提供符合條件的文件數量，這些文件分佈在給定篩選條件的值之間。

  "facetDistribution":{
    "categories":{
      "Electronics":20,
      "Electronics > Computer and Tablets":7,
      …
      "Electronics > Computer and Tablets > Computer Parts > Storage":3
    }

藉由利用篩選條件搜尋參數，您可以呈現整齊有組織且直觀的搜尋介面，讓使用者可以有效地篩選分層類別。Meilisearch 為您提供了建構您自己的篩選搜尋 UI 的鑰匙，然而，為了快速輕鬆地設定，使用 InstantSearch 與 instant-meilisearch 是一個非常有效率的替代方案。

使用 InstantSearch 和 instant-meilisearch

InstantSearch 是一個用於建構搜尋 UI 的開源前端函式庫。Instant-meilisearch 是將 InstantSearch 與 Meilisearch 整合的首選搜尋用戶端。

在本指南中，我們將使用 React 程式碼範例，您可以在 InstantSearch 的文件中找到更多範例

若要將 InstantSearch 與 instant-meilisearch 搭配使用，您需要

1. 匯入所需的模組

import React from 'react';
import { InstantSearch, SearchBox, InfiniteHits, HierarchicalMenu } from 'react-instantsearch';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';

2. 使用您的 Meilisearch 主機和搜尋 API 金鑰建立 Meilisearch 用戶端

const searchClient = instantMeiliSearch( 'https://ms-7053a8dd7c09-72.lon.meilisearch.io', 'meilisearchApiKey' )

3. 使用您的 Meilisearch 索引名稱和搜尋用戶端設定即時搜尋

function App() {
  return (
    <InstantSearch indexName="products" searchClient={searchClient}>
      {/* Widgets */}
    </InstantSearch>
  );
}

若要更瞭解 InstantSearch 和 instant-meilisearch 如何協同運作，您可以參閱我們的[專門部落格文章](/blog/instant-meilisearch/

在本指南中，我們將使用 InstantSearch 的 HierarchicalMenu 小工具，以分層方式顯示類別。

這個小工具有一個必要的 prop，稱為 attributes。它採用字串值陣列。每個字串都會識別資料結構中的特定屬性，該屬性旨在用於產生分層選單。

<HierarchicalMenu
    attributes={[
        "hierarchicalCategories.lvl0",
        "hierarchicalCategories.lvl1",
        "hierarchicalCategories.lvl2",
        "hierarchicalCategories.lvl3"
    ]}
/>

透過此小工具，您可以建立類似於以下範例的選單

本指南為您提供使用 Meilisearch 和 InstantSearch 實作分層式篩選搜尋所需的基本知識和步驟，增強使用者透過分層、直觀的分類進行導覽。

如需有關 Meilisearch 的更多資訊，您可以訂閱我們的電子報。您可以查看路線圖並參與我們的產品討論，進一步瞭解我們的產品。

如有任何其他問題，請加入我們在 Discord 上的開發者社群。