SearfForFacetValue highlight bug

Hi, I implemented a refinementList widget using instantsearch.js, but when searching for facet values the response is returning malformed highlighted results:

Captura

The result item code is this:

<div class="ais-refinement-list--item">
<div>
	<label class="ais-refinement-list--label">
	  <input class="ais-refinement-list--checkbox" value="Colombia" type="checkbox">
		  __ais-highlight__C__/ais-highlight__olombia
	  <span class="ais-refinement-list--count">21</span>
	</label>
</div>

And the error seems to come frome the Api response call:
Captura2

It’s impossible to locally fix these behaviour because there’s no template option for the sffv results.
Is ther another way to fix it? or it must be fixed by algolia’s team?

Thanks For your Help.

Jorge

You should replace the safe highlighting by a html tag to highlight, the __ais-highlight__ is the beginning tag, __/ais-highlight__ the end tag.

see (among other places: https://github.com/algolia/vue-instantsearch/blob/9edf62e8535b8337ea44b3c81e1beee2228564f1/src/sanitize-results.js)

Thanks haroen,

Indeed i could replace the safe highlighting usig the transformData function:

search.addWidget(
instantsearch.widgets.refinementList({
	container: '#countries',
	attributeName: 'country_name',
	operator: 'or',
	collapsible: true,
	limit: 10,
	searchForFacetValues: {
		placeholder: 'Search',
		templates: {
			noResults: 'No results'
		}
	},
	transformData: function (item) {
		var h=item.highlighted+"";
		h = h.replace(/__ais-highlight__/g,'<em>');
		h = h.replace(/__\/ais-highlight__/g,'</em>');
		item.highlighted=h;
		return item;
	},
}));

Thanks again for your guide.

1 Like

Perfect, I’m opening an issue in the repository as well so we can get it fixed in the library

EDIT: https://github.com/algolia/instantsearch.js/issues/2474

1 Like