logo标签列表

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

javascriptsearchalgolia
3
我正在使用Algolia的algoliasearch-client-js和autocomplete.js来为我的网站提供搜索功能。这很好用。
但我也想包括搜索查询匹配的文本摘录/片段。如何实现？

我的当前代码是：

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 设置是一种缩短（“snippet”）长文本以在搜索结果中显示它们的方法。只需想象一下 Google 结果下面显示的小段文本：它由页面内容的句子子集构建，包括您匹配的关键字，并避免淹没搜索结果页。例如，如果您将 “description” 属性的单词数限制为 10，则 JSON 答案的 “_snippetResult.description.value” 属性仅包含此描述的最佳 10 个单词。

然而，没有 AttributesToSnippet 的示例。在他们的 Github 文档 上，我发现了更多信息：

attributesToHighlight

  • 作用范围: 设置, 搜索
  • 类型: 字符串数组
  • 默认值: null

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

一个字符串，其中包含根据查询要高亮显示的属性列表。属性之间用逗号分隔。您还可以使用字符串数组编码（例如["name"，"address"]）。如果属性没有与查询匹配的内容，则返回原始值。默认情况下，所有索引属性都会被高亮显示（只要它们是字符串）。如果要高亮显示所有属性，则可以使用*。

我很难将他们抽象、零散的信息翻译成连贯的代码。有什么建议吗？

您当前的代码应该已经使用suggestion._highlightResult.title.value来突出显示匹配的单词。如果您检查一个应该匹配的单词，您应该会看到匹配单词周围有<em>标签。 - Jerska
attributesToSnippet 的工作方式与 attributesToHighlight 完全相同，只是在模板中使用 _snippetResult 而不是 _highlightResult，但对于标题来说，您可能不需要这样做。 - Jerska
@Jerska 感谢您的评论。没错，_highlightResult.title.value 返回了与搜索查询匹配的内容标题。但它并没有显示出是内容的哪个部分导致了该标题的出现。 - Jos
@Jerska（第2条评论）。在我的当前代码中访问 _snippetResult 会出现“未定义”的错误消息。我已经尝试了这个方法（以及很多其他方法）；这就是为什么我在这里询问的原因。 - Jos
你在 attributesToIndex 中指定了哪些属性？ - Jerska
@Jerska 没有。我使用autocomplete.js包装器，初始化时不需要指定algoliasearch-client-js的attributesToIndex。也许现在需要，但是attributesToIndex不是autocomplete的选项。 - Jos
2个回答
2
"attributesToIndex"、"attributesToHighlight" 和 "attributesToSnippet" 是用于突出显示的三个主要设置。点击此处了解更多信息。
  • attributesToIndex是一个索引设置（您可以在控制面板或后端进行设置，但不能在前端设置）。
  • attributesToHighlight如果未设置，则等于attributesToIndex。它们可以作为attributesToIndex在索引设置中设置，但也可以在查询时被覆盖（并且只能包含attributesToIndex中的属性）
  • attributesToSnippet如果未设置，则等于空数组。每个属性都可以在末尾带有修饰符，例如:10，以说明您在片段中想要多少个单词。除此之外，它们的工作方式与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>标签中。这些标签可以用来显示匹配的单词。
我省略了答案的某些属性，因为它们对理解我的答案没有帮助。您可以通过在建议函数开头添加一个小的console.log(suggestion)来在浏览器控制台中查看它们。
感谢Jerska提供详细的答案。这确实帮助我更好地理解了返回建议的理论。 - Jos
2
我自己解决了问题，是因为纯属偶然在Algolia的仪表板中找到了一个设置。为了使返回的搜索结果也返回片段，我做了两件事：
1) Algolia的仪表板中有一个名为“属性片段”的选项，您可以在正在搜索的特定索引的“显示”选项卡中找到它。
在我的情况下，我将该选项设置为我想要在搜索查询中突出显示的记录属性，如下所示：

Image of Algolia settings

2) 在我配置了那个设置之后，我可以在 autocomplete.js 库的函数中访问 _snippetResult。正如您在上面的图像中所看到的，我添加到“要摘录的属性”选项的属性是“content”，因此我使用 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;
});
总结一下，简单来说，只需要手动启用搜索片段的返回，而不必在代码中使用attributesToSnippet 某处。
仅供澄清，当您在仪表板中设置“Attributes to Snippet”时，这只是在幕后设置了索引设置中的“attributesToSnippet”。 - Jerska
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接