分层式多面搜索指南

本指南剖析了嵌套分层多面（nested hierarchical facets）的概念，并提供了使用 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

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

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

Meilisearch 通过 facets 搜索参数 支持此功能。当你将 facets 参数添加到搜索查询中时，Meilisearch 会返回一个 facetDistribution 对象。该对象提供了在给定多面值中匹配文档的数量分布情况。

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

利用 facets 搜索参数，您可以呈现一个整洁且直观的搜索界面，让用户有效地筛选分层类别。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。