Apr 4, 2024
0
Level 1
Laravel 10: Meillsearch/InstantSearchJS
I recently integrated Meillsearch with InstantSearchJs in a Laravel 10 project. Everything works perfectly but I have an HTML tag problem at the DOM level (The tags are escaped when I try to display images in my hits).
here is my JS code:
const {searchClient} = instantMeiliSearch(
'http://localhost:7700',
'',
{
placeholderSearch: true,
primaryKey: 'id',
}
)
let search = instantsearch({
indexName: 'index',
searchClient: searchClient,
})
search.addWidgets([
searchBox({
container: '#searchbox',
placeholder: 'Rechercher',
showLoadingIndicator: true,
showReset: true,
}),
infiniteHits({
container: '#infinite-hits',
escapeHTML: false,
templates: {
item(hit, {html, components}) {
return html`
<div> <div class="img"> <img src="${hit.poster}" alt="poster">
</div> <div class="info"> <p>${components.Highlight({attribute: 'name', hit})}</p>
<small>${components.Highlight({attribute: 'fonction', hit})}</small>
</div> </div> `;
},
empty(results, {html}) {
return html`Aucun résultat pour <q>${results.query}</q>`;
},
},
}),
])
search.start()
Please or to participate in this conversation.