Search 仅当包含突出显示的匹配项时才在搜索结果模板中显示属性

我有几个属性设置为attributesToRetrieve。在我的模板中，虽然只显示其中的一些。大致如下：

{{{u highlightResult.attr1.value} {{{u highlightResult.attr2.value} {{{u highlightResult.attr3.value} 这样，属性在任何情况下都将被呈现，如果它们包含匹配的单词，则会高亮显示

现在，我想添加另一个部分，其中可以显示所有其他属性，但前提是它们包含要高亮显示的匹配单词，例如：

{{{u highlightResult.attr_1.value} {{{u highlightResult.attr_2.value} {{{u highlightResult.attr_3.value} {{{u highlightResult.Long{u SpecialAttr\u 1.value} {{{u highlightResult.SpecialAttr_2.value} {{{u highlightResult.SpecialAttr_3.value} 如注释中所述，仅当这些特殊属性中的任何一个包含高亮显示的单词时，才会呈现和显示此部分，并且仅显示包含匹配单词的属性

另外，正如您所看到的，有一个Long_SpecialAttr_1，它是一个Long text属性，我希望它显示为一个片段属性

为了更好地理解这一点，我试图为这一附加部分实现的功能类似于谷歌在每个搜索结果下面显示的内容，一种带有省略号的文本块，包含这些属性的标记词

这可能吗？我用的是algolia，谢谢

更新

感谢他的回答，不幸的是，有一小部分代码在我的案例中不起作用，特别是：

['highlight'，'snippet'].forEachfunction类型{ 数据[''类型+'结果'].forEachfunction elt{ elt.display=elt.matchLevel！=“无”； }; }; 控制台中显示数据时出错。\u snippetResult.forEach未定义。所以我修改了这一点：

结果中的forvar el { //使用布尔值创建新属性，如果不是无，则为true d、 _snippetResult[el].display=d._snippetResult[el].matchLevel！=“无”； };

---

首先，为了在继续之前澄清索引的设置，Algolia还突出显示了中的属性。 此外，要在代码段的属性上添加省略号，可以设置。 因此，您可能希望在索引中使用以下设置：

属性突出显示：['attr_1'，'attr_2'，'attr_3'，'SpecialAtr_2'，'SpecialAtr_3']， attributesToSnippet:['Long\u SpecialAtr\u 1:3'，//代码段最多应包含3个单词 SnippetEllipsText:“…”//这是utf-8水平省略号字符 在前端，在instantsearch.js中，您可以在几乎任何小部件上使用transformData参数，以便能够访问和/或修改传递给模板的数据

在这个具体的例子中，我们想看一看

第一步是记录数据：

search.addWidget instantsearch.widgets.hits{ 转换数据：{ 项目：功能数据{ 控制台日志数据； 返回数据； } } } ; 这将允许您看到此类响应：

_高亮显示结果：{ 属性1：{ 值：“lorem ipsum dolor sit”， 匹配级别：“已满”， 匹配词：['ipsum'，'sit'] }, 属性2：{ 值：“lorem ipsum dolor”， matchLevel:'部分'， 匹配词：['ipsum'] }, 属性3：{ 值：“lorem”， 匹配级别：“无”， 匹配词：[] }, // ... }, _结果：{ 长形特长1：{ 值：'lorem ipsum dolor…'，//假设Long_SpecialAttr_1等于'lorem ipsum dolor sit' 匹配级别：“已满” } } 不幸的是，这里的API有点不一致，因为正如您所看到的，片段属性没有突出显示的属性所具有的matchedWords属性。如果确实需要信息，可以选择在attributesToSnippet和attributesToHighlight中进行设置

然而，对于您的用例，我们只需要matchLevel。我们想要的是，仅当matchLevel！='没有。不幸的是，instantsearch.js的底层模板引擎不允许有太多的灵活性，因此您不能将此比较放在模板中

解决方案可以是在transformData中预计算这些条件：

转换数据：{ 项目：功能数据{ ['highlight'，'snippet'].forEachfunction类型{ 风险值组=数据[''类型+'结果']； 对于组中的var attr{ 如果！group.hasOwnPropertyattr继续； var elt=组[attr]； elt.display=elt.matchLevel！=“无”； }; }; data.displaysecial=false|| 数据。_snippetResult.Long_speciallatr_1.display|| 数据._highlightResult.specialatr_2.display|| 数据._highlightResult.speciallatr_3.display； 返回数据； } } 然后在模板中使用这些新属性：

{{{{u highlightResult.attr_1.value}}} {{{{u highlightResult.attr_2.value}}} {{{{u highlightResult.attr_3.value}}} {{displaySpecial}} {{{u snippetResult.Long{u SpecialAttr\ u 1.display} {{{{u highlightResult.Long{u SpecialAttr\u 1.value}}} {{/_snippetResult.Long_SpecialAttr_1.display} {{{u highlightResult.SpecialAttr_2.display} {{{{u highlightResult.SpecialAttr_2.value}}} {{/_highlightResult.SpecialAttr_2.display} {{{u highlightResult.SpecialAttr_3.display} {{{{u highlightResult.SpecialAttr_3.value}}} {{/_highlightResult.SpecialAttr_3.display} {{displaySpecial}}

---

顺便说一句，要呈现HTML，您应该使用{{{…}}而不是{{…}，我在这里替换了它们

太棒了！非常感谢您的详细回答！：我在forEach上遇到了一个小问题，控制台错误报告说有一个未定义的函数，我猜是因为你只能在数组上强制转换forEach，还是我忽略了什么？所以我修改了更新中提到的那一点。哦，是的，的确，我把我的梦想变成了现实。ES5的forEach确实不适用于对象，而下划线/lodash的forEach函数适用于对象。我会更新我的答案。我明白了，但我认为这里真正缺少的可能是我没有使用Lodash，但：P