Подсветка Алголии в Laravel 5.3

Question

Подсветка Алголии в Laravel 5.3

Я использую Laravel 5.3 и Алголия,

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

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

Есть идеи?

1

algolia laravel-5.3 php

Решение

Другие решения

В каждом предмете, возвращаемом поисковой системой, есть дополнительная "_highlightResult" атрибут, который содержит некоторые метаданные и значение доступных для поиска атрибутов, измененных поисковыми терминами, окруженными ,

Например, для поискового термина «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.
Выделение набранных ключевых слов в результатах поиска осуществляется в течение виджет хитов так же, в его templates.item параметр.

Вы можете найти живой пример кода этой функции здесь https://community.algolia.com/instantsearch.js/examples/

0

Источник

Accepted Answer

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

Конечно, если вы предпочитаете, чтобы они оборачивали выделенный текст чем-то, кроме  затем вы можете настроить его по своему усмотрению (например, тег span с классом «selected-search» или что-то в этом роде). Вы настраиваете это при инициализации поиска в вашем PHP.

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

Теперь предположим, что вы ищете ‘John D’ и отправляете этот поисковый запрос. Алголия вернет строку с эффектом:

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

Теперь с вашим CSS вы настраиваете его как

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

и теперь он выделит поисковый запрос желтым цветом.

Конечно, все это при условии, что вам нужны статические (PHP Library) результаты поиска на стороне сервера. Я настоятельно рекомендую вам использовать autocomplete.js библиотека, так что вы можете получить живые результаты поиска по мере ввода. Это требует использования библиотек js для возврата результатов на стороне клиента, пока пользователь печатает. Это намного лучший опыт.

2