Do not know how to implement Display search results (choosing Mustache template)

Hi Algolia,

In my symfony2 framework, I follow https://community.algolia.com/instantsearch.js/v2/getting-started.html it the search of an index is working. BUT I do not know how to customize the view. Currently my result page view is attached

I added the below code to my home.html.twig page/view of a symfony2 framework like so:

β€˜{% block body %}’

<script ... search.addWidget( instantsearch.widgets.hits({ container: '#hits', templates: { empty: 'No results', item: 'Hit {{objectID}}: {{{_highlightResult.name.value}}}' } }) ); ... </script {% endblock %}' But the line item: 'Hit {{objectID}}: {{{_highlightResult.name.value}}}' will give error attached Am i missing something definitely, what do i need to do, can you please point me to documentation to implement Mustached template for instantsearch.js results? I only need to know what I need to do if you can point documentation or some google example I really appreciate your help to get me going again. Thank you so much!

i found the solution:

// initialize hits widget
search.addWidget(
instantsearch.widgets.hits({
container: β€˜#hits’,
templates: {
empty: β€˜No results’,
item: β€˜{% verbatim %}{{{_highlightResult.title.value}}}

{{description}}

{% endverbatim %}’
},
hitsPerPage: 6
})
);

Hi @dunnleaddress

Thanks for posting the solution here. Indeed since both template engine use the same delimiter, it has to be escaped.

For further reference, here is the documentation: https://twig.symfony.com/doc/2.x/tags/verbatim.html

1 Like

Thanks @julienbourdeau this is helpful for people implementing Algolia in Symfony! You can close the question.

1 Like

How do I do that in an HTML template without Twig?

InstantSearch:

search.addWidget(
  instantsearch.widgets.infiniteHits({
    container: '#hits',
    templates: {
      item: document.getElementById('hit-template').innerHTML,
      empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
    },
    escapeHits: false,
    showMoreLabel: "Load more results..."
  })
);

Hit template:

<script type="text/html" id="hit-template">
  [...]
  <div class="hit-text">{{{_highlightResult.content.value}}}</div>
</script>

What kind of html template are you using in your backend @marcia? You want to look for escaping or raw markup.

On the front-end, you can use {{{ }}}.

Thanks your tips really save me!

1 Like