How to supply search helper results to ais-hits

Hello! I’m trying to trigger the search manually via button click:

	<div slot-scope="{ currentRefinement, refine }">
	  <input type="text" :value="currentRefinement" @keyup="updateQuery">
	  <button type="button" @click="() => triggerSearch(refine)">search</button>
data() {
  return {
    query: '',

methods: {
  updateQuery(evt) {
    this.query =;

  triggerSearch(refine) {

This works, but I also have a facet and geo search so I tried using the search helper:

const searchClient = algoliasearch(

const searchHelper = algoliasearchHelper(searchClient, 'airbnb');

searchHelper.on('result', function(event) {
  console.log('results: ', event.results); // how do I supply this to ais-hits?

  .setQueryParameter('query', 'boston')
  .setQueryParameter('aroundLatLng', '52.0357954,0.7201228')
  .setQueryParameter('aroundRadius', 'all')

But the problem is I don’t have an idea how to assign the search results to the ais-hits widget.

Here’s the code:

The widgets have their own internal state, it is possible to use an exernal helper to update this state but that is not something we advise.

In your sandbox I see that you used the configure widget to the facet and geo search, what is not working for you with this approach ?

@yannick.croissant the problem I’m having with the ais-configure approach is that I have to manage the state to route mapping by myself.

With the following ais-configure widget:


And the initial data:

data() {
  return {
    query: '',
    temp_query: '',
    selected_property_type: '',
    temp_selected_property_type: '',

I have to fill out the relevant values when the component is created:

created() {
	this.query = getUrlParameter('query');
	const property_type = getUrlParameter('property_type');
	this.temp_selected_property_type = property_type;
	this.selected_property_type = property_type;

Basically, I need to have temporary variables for holding the desired value for each search parameter that I supplied to ais-configure. And when the user clicks on the search button, I set them as the value for the real variable, then update the URL manually:

triggerSearch() {
  this.query = this.temp_query;
  this.selected_property_type = this.temp_selected_property_type;

This is where the problem happens because for some reason, I can’t get the property type to stay on the address bar. When I click on search, it will be assigned as a query parameter for a second and disappears the next. The way I’m setting it doesn’t seem to be recognized by Algolia:

updateUrl() {
  const query_params = new URLSearchParams(;
  const queryParameters = {};
  if (query_params.has('query')) {
    queryParameters.query = query_params.get('query');

  if (this.selected_property_type) {
    queryParameters.property_type = this.selected_property_type;

  if (query_params.has('page')) { = query_params.get('page');

  const urlParts = location.href.match(/^(.*?)\/search/);
  const baseUrl = `${urlParts ? urlParts[1] : ''}/`;
  const query_string = queryString.stringify(queryParameters);

  const new_url = `${baseUrl}search?${query_string}`;

  window.history.pushState({ path: new_url }, '', new_url);

My question is, is there a better way of doing this? I’m managing the URL manually which is rather clunky. I just want to make it so that when I visit a URL that looks like this:, it’s gonna fill out the relevant fields and have the correct state. The same should also be true the other way around: everytime I click on the search button, the property_type and query should update in the URL.

Here’s the code:

if you are doing things related to the URL, is there a reason you’re not using the routing prop on InstantSearch? docs are here: