分层分面搜索指南

本指南分解了嵌套分层分面的概念，并为使用 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 list（可过滤属性列表）。从我们的产品示例中，您应该将  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 widget（分层菜单组件）以分层方式显示类别。

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

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

使用此 widget，您可以创建一个类似于下面示例的菜单

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

要了解更多关于 Meilisearch 的信息，您可以订阅我们的 newsletter（新闻通讯）。您可以通过查看 roadmap（路线图）和参与我们的 product discussions（产品讨论）来了解更多关于我们产品的信息。

对于其他任何问题，请加入我们在 Discord 上的开发者社区。