How to display [query] text in [hits] result?

Hello, I have code like this:

  instantsearch.widgets.hits({
    container: '#hits_sougo',
    templates: {
      item: `
        <a href="{{URL}}" target="_blank">
        <div class="hit-name">{{SearchTitle}}</div>
        </a>

         <div class="hit-description">         
        	{{#helpers.snippet}}{ "attribute": "MainText" }{{/helpers.snippet}}
        </div>

        <div class="hit-price">FileTitle:{{PdfTitle}</div>
        <div class="hit-price">FileType:{{FileStyle}}</div>
        <div class="hit-price">OtherLinks:
        <a href="{{Source}}" target="_blank">URL1</a>
        <a href="http://www.example.com/keyword={querytext}" target="_blank">URL2</a>
        <a href="#" target="_blank">URL3</a></div>
      `.replace(/{querytext}/i, {{????????????}}),
    },
  }),

I want to put query text in the [item] (not in search box),
beacause I will use current query text to make a url to other sites.
is it possible?
is there something I can use in the {{???}}(I think it will be a str that have query text) block,
or could you tell me other methods?
thx

Hi there.
It depends on the version of InstantSearch.js.
Since v4.9, we have added something called renderState.
It makes you able to access any render state from anywhere.

Here is an example for you.
Let me know how it goes and if you have any question.

1 Like

It works well, deeply thanks!
and there is a new problem.

I want to display some attributes in highlight (by use item: (hit) ),
and display others without highlight (by use item: (item)).

both item: (item) and item: (hit) work well,
but the following code doesn’t work.
Could you explain to me about this, please?
I want to thank you a lot!

templates: {
      item: (item,hit) => `
<article>
<!-- disply {name} without highlight /-->
  <h1>${item.name} </h1>

<!-- display {description} with highlight /-->
  <p>
    ${instantsearch.highlight({
      hit,
      attribute: 'description',
    })}
  </p>

<!-- display current query /-->
  <p>query: ${search.renderState[indexName].searchBox.query}</p>
</article>
`,
    },

i’m not yet understand fully whats those parameters in item:() means, but looks like the code works.
thank you very much.

    templates: {
      item: (hit) => 
      `
      <article>
      <!-- disply {name} without highlight /-->
        <h1>${hit.name} </h1>
        
        <!-- display {description} with highlight /-->

   <p>
   ${instantsearch.highlight({
    hit,
    attribute: 'description',
    })}
   </p></article>


<!-- display current query /-->
  <p>query: ${search.renderState[indexName].searchBox.query}</p>
</article>
`

item can be either a template string or a function returning html:

Glad it works. Let us know if you get any other issue.