Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

AnaniKomlan's avatar

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()

Result

0 likes
0 replies

Please or to participate in this conversation.