Algolia高亮在Laravel 5.3

Question

我使用Laravel 5.3和Algolia，

我想强调的搜索结果，我阅读文档，但我还是不知道该怎么做。

https://www.algolia.com/doc/api-client/php/parameters#attributestohighlight

任何想法？

Answer 1

当从Algolia返回搜索结果时，默认情况下它们将用“<em> </em>”标签包装“突出显示的部分”。这种情况会立即发生，因此您只需使用CSS自定义搜索结果div中<em>的外观即可获得所需的效果。

当然，如果你更喜欢用<em>以外的其他东西包装突出显示的文本，那么你可以用你想要的任何东西来定制它（比如也许是带有“高亮搜索”类的span标签）。您在PHP中初始化搜索时自定义此项。

$index = $client->initIndex('contacts'); 
$result = $index->search('search query', ['attributesToRetrieve' => 'firstname,lastname', 'hitsPerPage' => 50, 'highlightPreTag' => '<span class="highlighted-search">', 'highlightPostTag' => '</span>']); 

现在让我们假设您搜索'John D'并提交该搜索查询。 Algolia将一个字符串返回的效果：

<span class="highlighted-search">John D</span>oe 

现在用你的CSS您自定义它像

span.highlighted-search { 
    background-color:yellow; 
} 

，现在它会突出显示黄色的搜索查询。

---

当然这都假设你想要静态（PHP库）服务器端搜索结果。我强烈建议您使用autocomplete.js库，这样您可以在输入时获得实时搜索结果。这需要使用js库在用户输入时返回结果客户端。这是一个更好的经验。

Answer 2

在搜索引擎返回的每个项目中，还有一个额外的"_highlightResult"属性，其中包含一些元数据以及用<em>包围的搜索项修改的可搜索属性的值。

例如，对于搜索词“toux”，返回的JSON会看起来像：

{ 
     "medicament" : "VICKS TOUX SECHE 7,33 mg ADULTES MIEL, pastille", 

     "_highlightResult" : { 
     "medicament" : { 
      "value" : "VICKS <em>TOUX</em> SECHE 7,33 mg ADULTES MIEL, pastille", 
      "matchedWords" : ["toux"] 
      .... 
     ... 
    } 

为了突出搜索结果，与搜索项，你只需要显示"_highlightResult"下的属性值而不是原始的。

如果您还没有使用它，我建议您使用Instantsearch.js。 突出显示搜索结果的类型化关键字在hits widget中的处理方式与templates.item参数相同。

您可能会发现此功能的实时代码示例https://community.algolia.com/instantsearch.js/examples/