How to supply search helper results to ais-hits

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

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

methods: {
  updateQuery(evt) {
    this.query = evt.target.value;
  },

  triggerSearch(refine) {
    refine(this.query);
  },
},

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

const searchClient = algoliasearch(
  'latency',
  '6be0576ff61c053d5f9a3225e2a90f76'
);

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

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

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

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:

<ais-configure
  :distinct="true"
  :enable-personalization.camel="true"
  :query="query"
  :facet-filters.camel="facetFilter"
  :around-lat-lng.camel="coordinates"
  :around-radius.camel="around_radius"
  :hits-per-page.camel="10"
/>

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.updateUrl();
},

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(window.location.search);
  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')) {
    queryParameters.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: https://n1odt.csb.app/search?query=bar&property_type=Villa, 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: