2023 年 9 月 14 日

使用 InstantSearch 通过 ID 优化分面

了解如何在 UI 中使用 InstantSearch 显示分面名称，同时通过其唯一标识符优化分面。

Carolina Ferreira开发者倡导者 @ Meilisearch@CarolainFG

Refining facets by ID with InstantSearch

在本指南中，我们将深入探讨 Meilisearch 中分面的概念，以及如何使用它来显示分面名称，同时按 ID 进行筛选。

什么是分面？

分面是搜索引擎中使用的一种技术，用于将搜索结果分类为多个类别或“分面”。这些分面可以是类别、标签、价格范围甚至颜色等任何内容。这使得用户可以更轻松地浏览和筛选结果，从而提供更精细和高效的搜索体验。

为什么使用 ID 作为分面过滤器？

对于大多数应用程序和用户来说，按分面名称（例如电影的类型）进行筛选通常就足够且直观了。分面名称是人类可读的，并提供了过滤器作用的清晰概念。然而，在某些用例中，出于以下几个关键原因，最好按 ID 进行筛选：

更不容易出错：ID 通常更简单且标准化，使其不太容易出现分面名称中可能存在的错别字或不一致之处。
唯一标识符：在某些数据库中，分面名称可能会重复，但具有略微不同的特征，而 ID 始终是唯一的。这在您拥有名称相似或相同但属性不同的项目的情况下特别有用。

通过使用 ID 进行筛选，但向用户显示相应的分面名称，您可以同时获得两全其美的效果：效率和可用性。这样，您就可以利用 ID 和名称的优势，使您的应用程序稳健且用户友好。

ID 到名称的挑战

在 Meilisearch 中，分面是过滤器的特殊用例。本质上，您可以将添加到 filterableAttributes 列表中的任何属性用作分面。当您向搜索查询添加分面参数时，Meilisearch 将返回一个 [facetDistribution](https://meilisearch.org.cn/docs/reference/api/search#facetdistribution) 对象。此对象提供了在给定分面的值之间分布的匹配文档的数量。

 "facetDistribution":{
    "genres":{
      "Classics":6,
      "Comedy":1,
      "Coming-of-Age":1,
      "Fantasy":2,
      "Fiction":8,
      …
    }
  }

但是，如果您添加到 filterableAttributes 列表中的字段是一个 ID，则 facetDistribution 对象将返回这些 ID。

 "facetDistribution":{
    "genres":{
      "5":6,
      "6":1,
      "8":1,
      "13":2,
      "16":8,
      …
    }
  }

虽然 ID 对于后端操作非常有用，但它们在前端不一定用户友好或有意义。这就是为什么您可能需要在用户界面中显示这些 ID 时将其映射回相应的分面名称。

前端的 ID 到名称映射

假设您有一个如下结构的电影数据集

{
    "id": 5,
    "title": "Four Rooms",
    "overview": "It's Ted the Bellhop's first night on the job....",
    "genres": [
        {
            "id": 7,
            "name": "Crime"
        },
        {
            "id": 6,
            "name": "Comedy"
        },
    ],
    "release_date": 818467200,
}

您需要一个基于电影类型的分面搜索。因此，您将 genres.id 添加到可筛选属性列表。当然，在 UI 中，您想显示 genres.name，以便用户在 UI 上看到“犯罪”而不是“7”。

让我们深入了解如何使用 InstantSearch 和 instant-meilisearch 实现此目的。

使用 InstantSearch 和 instant-meilisearch

InstantSearch 是一个开源前端库，用于构建搜索 UI。 Instant-meilisearch 是将 InstantSearch 与 Meilisearch 集成的首选搜索客户端。

要将 instant-meilisearch 与 InstantSearch 一起使用，您需要

1. 导入所需的模块，包括 instantMeiliSearch

import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
import instantsearch from 'instantsearch.js'
import { searchBox, infiniteHits,refinementList } from 'instantsearch.js/es/widgets'

2. 使用您的 Meilisearch 主机和搜索 API 密钥建立 Meilisearch 客户端

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

3. 使用您的 Meilisearch 索引名称和搜索客户端设置 instantsearch

const searchIndex = instantsearch({
  indexName: 'movies',
  searchClient
})

在本指南中，我们将使用 InstantSearch 的 refinementList 小部件将 ID 映射到用户友好的名称。

此小部件带有一个名为 transformItems 的可选参数。此函数接收 items（或分面），并允许您在它们显示在 UI 上之前对其进行转换。它还在其参数中包含完整的 results 数据。

每个项（或分面）都包含以下属性

count：分面在结果集中出现的次数
value：用于优化的值（在我们的例子中，它是 genres.id）
label：要显示的标签
highlighted：突出显示的标签。此值显示在默认模板中

如您所见，highlighted 是 refinementlList 小部件默认使用的标签。

有了这些信息，我们可以使用 transformItems 函数来显示 genres.name 而不是 genres.id。

transformItems(items, { results }) {
    // The 'results' parameter contains the full results data
    return items.map(item => {
      // Initialize genreName with the existing highlighted label
      let genreName = item.highlighted;
      
      // Loop through results.hits to find a matching genre
      for (let hit of results.hits) {
        const matchedGenre = hit.genres.find(genre => genre.id.toString() === item.value);
        
        // Update genreName if a match is found
        if (matchedGenre) {
          genreName = matchedGenre.name;
          break;
        }
      }
      
      // Return the updated item with the new tagName as the highlighted value
      return {
        ...item,
        highlighted: genreName
      };
    });
  }

通过此配置，您将有效地将 ID 映射到更用户友好的名称，从而增强用户的搜索体验。

完整代码应如下所示

import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
import instantsearch from 'instantsearch.js'
import { searchBox, infiniteHits,refinementList } from 'instantsearch.js/es/widgets'

const searchClient = instantMeiliSearch(
  'https://ms-7053a8dd7c09-72.lon.meilisearch.io',
  'meilisearchApiKey'
)
  
const searchIndex = instantsearch({
  indexName: 'movies',
  searchClient
})

const searchBox = instantsearch.widgets.searchBox({
  // ...
});

const hits = instantsearch.widgets.hits({
  // ...
});

const refinementList = instantsearch.widgets.refinementList({
  container: '#facets',
  attribute: 'genres.id',
  transformItems(items, { results }) {
    return items.map(item => {
      let genreName = item.highlighted; 
      for (let hit of results.hits) {
        const matchedGenre = hit.genres.find(genre => genre.id.toString() === item.value);
        if (matchedGenre) {
          genreName = matchedGenre.name;
          break;
        }
      }
      return {
        ...item,
        highlighted: genreName
      };
    });
  }
})

searchIndex.addWidgets([searchBox, infiniteHits, refinementList]);

searchIndex.start()

此示例演示了如何使用 vanilla JavaScript 实现 ID 到名称的映射，但是您可以使用您喜欢的前端框架获得类似的结果。请查看 React 和 Vue 的相关文档。

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

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

How to add AI-powered search to a React app

使用 Meilisearch AI

如何将 AI 驱动的搜索添加到 React 应用程序

使用 Meilisearch 的 AI 驱动的搜索构建一个 React 电影搜索和推荐应用程序。

Carolina Ferreira2024 年 9 月 24 日

Build your Next.js Shopify storefront with Blazity

使用 Meilisearch

使用 Blazity 构建您的 Next.js Shopify 店面

了解如何使用 Next.js 和 Blazity 商业启动器构建 Shopify 店面。

Laurent Cazanove2024 年 8 月 19 日

发布使用 Meilisearch

Meilisearch 1.8

Meilisearch 1.8 带来了否定关键字搜索、搜索稳健性和 AI 搜索的改进，包括新的嵌入器。

Carolina Ferreira2024 年 5 月 7 日