Algolia подсветка в Laravel 5.3

Question

Я использую Laravel 5.3 и Algolia,

Я хочу подчеркнуть, результат поиска, я прочитал документацию, но я до сих пор не знаю, как это сделать.

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

Любые идеи?

Answer 1

Когда результаты поиска возвращаются из Алголии, они по умолчанию обертывают «подсвеченную часть» знаками <em> </em>. Это происходит прямо из коробки, поэтому все, что вам действительно нужно сделать, это использовать CSS, чтобы настроить внешний вид <em> s в результатах поиска div, чтобы получить необходимый эффект.

Конечно, если вы предпочитаете, чтобы они обтекали выделенный текст чем-то иным, чем <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/