如何显示 Algolia 搜索查询的匹配词？

Question

我正在使用 Algolia 的 algoliasearch-client-js 和 autocomplete.js 在我的网站上进行搜索。这行得通。

但我还想包含与搜索查询匹配的文本的摘录/sn-p。该怎么做？

---

我当前的代码是：

autocomplete('#search-input', { hint: true, autoselect: true }, [
{
    source: autocomplete.sources.hits(index, { hitsPerPage: 7 }),
    displayKey: 'title',
    templates: {
        footer: '<span class="search-foot">Powered by <a href="https://www.algolia.com/" target="_blank" title="Algolia - Hosted cloud search as a service"><img src="/static/assets/algolia-logo.png" width="47" height="15"></a></span>',
        suggestion: function(suggestion) {
          return '<div class="search-lang">' + 
              suggestion._highlightResult.platform.value + 
              '</div>' + 
              suggestion._highlightResult.title.value;
        }
    }
}
]).on('autocomplete:selected', function(event, suggestion, dataset) {
  window.location.href = suggestion.url;
});

---

为了突出显示导致查询与记录匹配的摘录，他们的FAQ 说：

AttributesToSnippet 设置是一种缩短（“sn-p”）您的 长文本块以在搜索结果中显示它们。想一想 关于 Google 结果下方显示的小段文字： 从页面内容的句子子集构建，包括 您的匹配关键字，并避免淹没搜索结果页面。 例如，如果您限制“描述”的字数 属性为 10，“_sn-pResult.description.value”属性 JSON 答案将仅包含这 10 个最佳单词 描述。

但是，没有AttributesToSnippet 的示例。在他们的Github documentation 上，我找到了更多信息：

attributesToHighlight

• 范围：设置、搜索
• 类型：字符串数组
• 默认值：空

要突出显示的默认属性列表。如果设置为 null，则所有索引 属性突出显示。

包含要突出显示的属性列表的字符串 根据查询。属性用逗号分隔。你可以 也使用字符串数组编码（例如 ["name","address"]）。如果 属性与查询不匹配，则返回原始值。经过 默认情况下，所有索引属性都会突出显示（只要它们是 字符串）。如果要突出显示所有属性，可以使用 *。

我正在努力将他们抽象的、分散的信息翻译成一段连贯的代码。有什么建议吗？

Answer 1

attributesToIndex、attributesToHighlight和attributesToSnippet是三个主要的settings used for highlighting。

• attributesToIndex 是一个索引设置（您可以在仪表板或后端进行设置，但不能在前端设置）。
• attributesToHighlight 如果未设置，则等于 attributesToIndex。它们可以在您的索引设置中设置为attributesToIndex，但也可以在查询时被覆盖（并且只能在attributesToIndex 中包含属性）
• attributesToSnippet 如果未设置，则等于一个空数组。每个属性的末尾都可以有一个修饰符，例如:10，以说明您想要在 sn-p 中使用多少单词。除此之外，它们的工作方式与attributesToHighlight 相同。

举个例子：

索引设置

attributesToIndex: ['title', 'description']
attributesToHighlight: ['title']
attributesToSnippet: ['description:3']

记录

{
  "title": "Test article",
  "description": "A long long long test description long long long",
  "link": "https://test.com/test-article"
}

对于查询"test"，这里基本上是您得到的建议的 JSON：

{
  "title": "Test article",
  "description": "A long long long test description long long long",
  "link": "https://test.com/test-article",
  "_highlightResult": {
    "title": {
      "value": "<em>Test article</em>"
    }
  },
  "_snippetResult": {
    "description": {
      "value": "... long <em>test</em> description ..."
    }
  }
}

请注意，description 和 link 均不在 _highlightResult 对象中。
link 已从搜索中忽略，因为它不在 attributesToIndex 中
description 不在_highlightResult 因为它不在attributesToHighlight 中。

您还可以注意到，在_highlightResult 和_snippetResult 中，test 单词都包含在<em></em> 标记中。这就是您可以用来显示哪些单词匹配的标签。

我省略了some attributes of the answer，这无助于理解我的答案。您可以通过在建议功能的开头添加一个小的 console.log(suggestion) 在浏览器控制台中查看它们。

Answer 2

我自己解决了这个问题，因为在 Algolia 的仪表板中找到了一个设置，纯属运气。为了使返回的搜索结果也返回 sn-p，我做了两件事：

1)。 Algolia 的仪表板中有一个名为“Attributes to sn-p”的选项，您可以在您正在搜索的特定索引的“显示”选项卡中找到该选项。

就我而言，我将该选项设置为我想在搜索查询中突出显示的记录属性，如下所示：

2)。配置该设置后，我可以在 autocomplete.js 库的函数中访问 _snippetResult。如上图所示，我添加到“属性到 sn-p”选项中的属性是“内容”，因此我使用 suggestion._snippetResult.content.value 访问与搜索查询匹配的单词。

我现在的代码是：

---

autocomplete('#search-input', { hint: true, autoselect: false }, [
{
    source: autocomplete.sources.hits(index, { hitsPerPage: 7 }),
    displayKey: 'title',
    templates: {
        footer: '<span class="search-foot">Powered by <a href="https://www.algolia.com/" target="_blank" title="Algolia - Hosted cloud search as a service"><img src="/static/assets/algolia-logo.png" width="47" height="15"></a></span>',
        suggestion: function(suggestion) {

          return '<div class="search-lang">' + 
              suggestion._highlightResult.platform.value + 
              '</div><div class="search-title">' + 
              suggestion._highlightResult.title.value +
              '</div>' + '<div class="search-snippet">' + 
              suggestion._snippetResult.content.value + '</div>';
        }
    }
}
]).on('autocomplete:selected', function(event, suggestion, dataset) {
  window.location.href = suggestion.url;
});

---

总而言之，只需一个手动选项即可启用搜索 sn-ps 的返回，而不必在代码中使用 attributesToSnippetsomewhere。