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

Question

我正在使用 Algolia 的 algoliasearch-client-js and autocomplete.js 来增强我网站上的搜索。行得通。

但我还想包含与搜索查询匹配的文本的 excerpt/snippet。怎么做？

我当前的代码是：

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 说：

The AttributesToSnippet setting is a way to shorten ("snippet") your long chunks of text to display them in the search results. Just think about the small pieces of text displayed below a Google result: it's built from a subset of the sentences of the page content, includes your matching keywords, and avoid flooding the search results page. For example, if you limit the number of words of the "description" attribute to 10, the "_snippetResult.description.value" attribute of the JSON answer will only contain the 10 best words of this description.

然而，没有 AttributesToSnippet 的例子。在他们的 Github documentation 上，我找到了更多信息：

attributesToHighlight

scope: settings, search

type: array of strings

default: null

Default list of attributes to highlight. If set to null, all indexed attributes are highlighted.

A string that contains the list of attributes you want to highlight according to the query. Attributes are separated by commas. You can also use a string array encoding (for example ["name","address"]). If an attribute has no match for the query, the raw value is returned. By default, all indexed attributes are highlighted (as long as they are strings). You can use * if you want to highlight all attributes.

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

Answer 1

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

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> 标签中。这是您可以用来显示哪些词匹配的标签。

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

Answer 2

由于运气好，我在 Algolia 的仪表板中找到了一个设置，因此我自己解决了这个问题。为了使 returned 搜索结果 return 也成为代码段，我做了两件事：

1)。 Algolia 的仪表板中有一个名为 'Attributes to snippet' 的选项，您可以在您要搜索的特定索引的 'Display' 选项卡中找到它。

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

2)。配置该设置后，我可以在 autocomplete.js 库的函数中访问 _snippetResult。正如您在上图中看到的，我添加到 'Attributes to snippet' 选项的属性是 'content'，因此我使用 suggestion._snippetResult.content.value.[= 访问与搜索查询匹配的词。 15=]

我现在的代码是：

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;
});

总而言之，只需一个手动选项即可启用 return 搜索片段，而不必在代码中使用 attributesToSnippet 某处 .

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

How to display the matched words of an Algolia search query?

javascript

search

algolia