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

Question

我正在使用 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说:

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

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