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/