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

我正在使用Algolia的和来支持我网站上的搜索。这很有效

但我还想包括搜索查询匹配的文本的摘录/片段。怎么做

---

我目前的代码是：

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

autocomplete（“#搜索输入”，{hint:true，autoselect:true}[
{
来源：autocomplete.sources.hits（索引，{hitsPerPage:7}），
displayKey:'标题'，
模板：{
页脚：“由”供电，
建议：功能（建议）{
返回“”+
建议._highlightResult.platform.value+
'' + 
建议。_highlightResult.title.value；
}
}
}
]).on（'autocomplete:selected'，函数（事件、建议、数据集）{
window.location.href=suggestion.url；
});

---

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

AttributesToSnippet设置是一种缩短（“代码段”）的方法 显示在搜索结果中的长文本块。想想看 关于谷歌搜索结果下方显示的小文本：它是 从页面内容的句子子集构建，包括 您的匹配关键字，并避免淹没搜索结果页面。 例如，如果您限制“描述”的字数 属性的“\u snippetResult.description.value”属性 JSON的答案将只包含这十个最好的单词 描述

但是，没有

属性代码片段的示例。在他们的网站上，我找到了更多信息：

属性突出显示


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

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

包含要高亮显示的属性列表的字符串
根据查询。属性由逗号分隔。你可以
还可以使用字符串数组编码（例如[“名称”、“地址”]）。如果
属性与查询不匹配，返回原始值。通过
默认情况下，所有索引属性都高亮显示（只要它们是
字符串）。如果要高亮显示所有属性，可以使用*

我正在努力将他们抽象、分散的信息翻译成连贯的代码。有什么建议吗？
attributesToIndex
，
attributesToHighlight
和
attributesToSnippet
是三个主要的建议


是索引设置（可以在仪表板或后端设置，但不能在前端设置）
如果未设置，则等于
属性索引
。它们可以在索引设置中设置为
attributesToIndex
，但也可以在查询时被覆盖（并且只能在
attributesToIndex
中包含属性）
如果未设置，则等于空数组。每个属性的末尾都可以有一个修饰符，如
：10
，用来表示您希望在代码段中输入多少单词。除此之外，它们的工作方式与
attributesToHighlight
相同

让我们举一个例子：

索引设置

记录

对于查询
“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 ..."
    }
  }
}

{
“标题”：“供试品”，
“描述”：“长测试描述长”，
“链接”：https://test.com/test-article",
“_highlightResult”：{
“标题”：{
“值”：“供试品”
}
},
“_snippetResult”：{
“说明”：{
“值”：“…长测试描述…”
}
}
}

请注意，
说明
和
链接
都不在
\u highlightResult
对象中。

链接
在搜索中被忽略，因为它不在
属性索引中


说明
不在
\u highlightResult
中，因为它不在
属性突出显示
中

您还可以注意到，在
\u highlightResult
和
\u snippetResult
中，
测试
单词被包装在
标记中。这是可以用来显示匹配单词的标记

我忽略了这一点，这无助于理解我的答案。您可以通过在建议功能的开头添加一个小的
控制台.log（suggestion）
在浏览器控制台中看到它们。
我自己解决了这个问题，因为我在Algolia的仪表板中找到了一个设置纯属运气。为了使返回的搜索结果也返回代码段，我做了两件事：

1）。Algolia的仪表板中有一个名为“代码段属性”的选项，您可以在正在搜索的特定索引的“显示”选项卡中找到该选项

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


2）。配置该设置后，我可以访问autocomplete.js库函数中的
\u snippetResult
。如上图所示，我添加到“Attributes to snippet”选项中的属性是“content”，因此我使用
建议访问与搜索查询匹配的单词。\u snippetResult.content.value

我现在的代码是：


autocomplete（“#搜索输入”，{hint:true，autoselect:false}[
{
来源：autocomplete.sources.hits（索引，{hitsPerPage:7}），
displayKey:'标题'，
模板：{
页脚：“由”供电，
建议：功能（建议）{
返回“”+
建议._highlightResult.platform.value+
'' + 
建议。\u highlightResult.title.value+
'' + '' + 
建议._snippetResult.content.value+''；
}
}
}
]).on（'autocomplete:selected'，函数（事件、建议、数据集）{
窗口位置
{
  "title": "Test article",
  "description": "A long long long test description long long long",
  "link": "https://test.com/test-article"
}

{
  "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 ..."
    }
  }
}

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