How to trigger instantsearch query by setting input value dynamically

I’m currently trying to combine a docsearch and instantsearch instance on a project. I’m using docsearch to display the hits (since docsearch groups hits into a nice card layout by component type) and instant search to grab the list of available refinements based on the search.

I’m trying to sync the two input fields together so that when I type into the docsearch input field the instantsearch input field updates and runs a query. I’m able to update the instantsearch input field’s value by using docsearch’s queryHook property, but I’m unable to trigger the instantsearch query without actually typing into its input field.

How can I trigger the instant search instance to run once I’ve updated its input field to match the docsearch query?

Hi @ben.lehman,
Are you trying to modify the autocomplete as it is created by docsearch or are you creating a new custom UI that is querying both indices?

If it’s the latter, have you tried the guide found here?

If it’s the former, would you mind sharing with us acodesandbox that shows us what you are trying so far so that we can try to debug / make suggestions?

Thanks in advance!

1 Like

Hey @maria.schreiber! Thanks for the quick reply. Maybe a better way to phrase my question would be how can I trigger an instantsearch query without actually clicking into the input field and typing out the query?

I threw together this codesandbox to kind of demostrate the situation. Right now when you type into the docsearch input, the docsearch hits appear and the value gets updated in the instant search input, but even though the instantsearch input is updating (I’m also triggering keydown and change events on the input) the query is not happening.

You can tell as the refinement lists on the right hand side are not updating. When you type directly into the instantsearch input the refinement lists do update.

Is there a way to type directly into the docsearch input and have the instant search input query and update the refinements at the same time?

Let me know if you need any clarification and thanks so much for the help!

Hi @ben.lehman,
Thanks for providing the sandbox. It helped us understand your issue.
Instead of editing your sandbox, I’ve come up with a minimal sandbox to help you better understand.

There, if you press “Update input field” button first and then press “Trigger search” button.
At the bottom of app.js file, you’ll see how they work.

Please let me know how it goes and if you have any other questions.
Thanks.

1 Like

Hey @eunjae.lee,
This works perfectly! Thanks so much for the help and quick reply. I didn’t think about have access to the helper method outside of the searchFunction property.

Thanks again!

Glad to hear that :slight_smile:
Have a nice day.

1 Like

@eunjae.lee ah one last thing. Is there a similar functionality for docsearch/autocomplete? It doesn’t seem like a docsearch instance has access to the .helper method.

@ben.lehman thank you for reaching out. This is not possible indeed. This method is tied to InstantSearch.

1 Like