分层分面搜索指南

本指南详细阐述了嵌套分层分面的概念，并提供了使用 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 中，分面是 过滤器 的一个特定用例。某个功能是过滤器还是分面，主要取决于用户体验和用户界面设计。为了能够根据分面优化结果，您需要将要用作分面的属性添加到 filterableAttributes 列表中。以我们的产品为例，您应该将 hierarchicalCategories 设置为可过滤。

分层分面通常使用 AND 逻辑运算符，因为层次结构的每个级别都与其他级别协同作用，逐步缩小搜索范围。

示例

• 类别：电子产品
  • 子类别：电脑
    • 品牌：苹果

结果将显示属于电子产品类别 AND 电脑子类别 AND 苹果品牌的产品。

创建分面搜索界面时，显示结果在不同分面上的分布很有帮助。在用户优化搜索时，向他们显示不同类别中的结果数量可以增强他们的搜索体验。

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 索引名称和搜索客户端设置 InstantSearch

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

要更好地了解 InstantSearch 和 instant-meilisearch 如何协同工作，您可以参考我们的[专门博文](/blog/instant-meilisearch/)

在本指南中，我们将使用 InstantSearch 的 HierarchicalMenu 小部件以分层方式显示类别。

此部件有一个必需的属性，名为 attributes。它接受一个字符串值数组。每个字符串标识数据结构中的一个特定属性，旨在用于生成分层菜单。

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

使用此部件，您可以创建类似于以下示例的菜单

本指南为您提供了使用 Meilisearch 和 InstantSearch 实现分层分面搜索的基本理解和步骤，通过分层、直观的分类增强用户导航。

有关 Meilisearch 的更多信息，您可以订阅我们的新闻通讯。您可以通过查看路线图并参与我们的产品讨论来了解更多关于我们产品的信息。

如有其他问题，请在 Discord 上加入我们的开发者社区。