How can i refresh all widgets with a custom query?

Hi, I have a pretty noob question but I just don’t get my head around it.

How can I refresh all widgets with a custom query?

I’m using the instantsearchjs library, have a saerchbox, hits widget, several refinementlists, a stats widget and a custom input.
In the custom input the user can enter a location and a distance to filter the results from the search query.

On select I’m generating the new hits like described in the docs and getting the correct hits:

index.search(query_from_searchbox, {
  aroundLatLng: custom_input.lat+', '+custom_input.lng,
  aroundRadius: custom_select_distance
}).then(({ hits }) => {
  console.log(hits);
});

For the hits container I managed to render the new results like this:

index.search(query_from_searchbox, {
  aroundLatLng: custom_input.lat+', '+custom_input.lng,
  aroundRadius: custom_select_distance
}).then(({ hits }) => {
  $(container).html(hits.map(hit =>
    `
      <div class="content-hit">
        <a class="content-header" onclick="openTab($(this));">
        <div class="text">
          <h3>${hit.name}</h3>
          <ul class="no-list-style horizontal">
            <li>${hit.formatted_date}</li>
            <li>${hit.location}</li>
          </ul>
        </div>   
        </a>   
      </div>
      ...
    `
  ));
});

But how can I refresh the other widgets, according to the new hits from the custom search?

search.addWidgets([
  ...
  instantsearch.widgets.refinementList({
    container: '#contract_type',
    attribute: 'contractType',
    templates: {
      item: `
        <label class="refinement-label">
          <input type="checkbox" class="refinement-list-checkbox" value="{{label}}" {{#isRefined}}checked{{/isRefined}}>
          <span class="refinement-labelText">{{label}}</span>
          <span class="refinement-count">{{count}}</span>
        </label>
      `,
    },
  }),
  ...
]);

Or is this approach wrong in general an there is a method i’m complety overlooking?

Thanks and best
Rudi

Hi @rugruppe3, it’s hard to tell with just snippets of your code, but if you use index.search.addWidgets instead of just search.addWidgets, does that help? If not, could you provide a codesandbox to demonstrate the issue? We have starter templates here.

Hi Cindy,

I’ve created a Codesandbox that should explain what I want to do: https://codesandbox.io/s/loving-leftpad-14ysu?file=/src/app.js
In the end all I need is to repeat the previous query with the additional parameters aroundLatLng and aroundRadius and trigger that query when the user clicks a button.
I just can’t find a function to do that.

Thanks and best,
Rudi

Hi @rugruppe3,
The way you used index.search() is totally disconnected from InstantSearch.

I’ve made an example for you.

If you see the link above, it shows you how to create a custom component by using connectGeoSearch. It sets some specific coordinates and clears it. You can tweak this example to fit your needs.

  1. Customizing an Existing Widget: This documentation explains how to create custom widgets in general.

  2. geoSearch: This is an API reference for geoSearch widget and connectGeoSearch connector for you to create richer geo search experience.

Please let us know if this resolves your issue or if you have any other question.

Hi eunjae,

that was the right hint. I needed a custom configuration widget. With it, i managed to change the location and the radius on the fly.

Thanks and best
Rudi