分层分面搜索指南

本指南详细介绍了嵌套的分层分面的概念，并提供了使用 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 逻辑运算符，因为层次结构的每个级别都与其他级别连接起来，以逐步缩小搜索范围。

示例

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

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

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

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 如何协同工作，您可以参考我们 专门的博客文章。

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

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

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

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

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

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

对于其他任何事项，请加入我们开发者社区的 Discord。