Preload autocomplete results based on a qury string

The Basic Idea

User enters his search on a “prior page”, lets say front page.

The autocomlete (hitsPerPage) list is limited to five results. So he only sees five results maximum. But he also gets a count of 35 total results in his dropdown search list on the FrontPage.

So if we make a link out of the count of the thirtyfive to a page where he can see all of the 35 results on one screen…

…Would that not be great!

The link would be basic https://happywifes.com/search?q=spandexsuit or similar constructed out of …

document.querySelector('#borises').value

…where #borises is the input.

Now. When the user clicks that link he moves on in his life and gets to the Results Page.

Now the fun part starts.

There is a similar autocomplete mechanism on that page but which shows 50 entries/results at once.

There is no problem searching ‘again’ and you will be a happy cookie.

But.

It would be so much more cooler if we could get these 35. spandexsuits preloaded beforehand.

I.e. is there some setting that lets you preload ‘autocomplete’ results based on a honest querystring q??

Best
Herra Jón

P.S. Absolutely new to Algolia and love it. Using the instantsearch.js version 4.4.1 I think for the UI very simple vession. Thank you for your reading and have a nice day.

P.S.S. It is not enough to populate the searchbox with the queryString.q value.

Hey there @herrajon! So glad to hear you’re enjoying using Algolia. :smiley:

If I understand correctly, you’d like your autocomplete built with InstantSearch to be pre-populated with a search string derived from the URL string, is that right? Have you tried using our routing option for this?

If so, but you’re running into issues (or if I’ve misunderstood what you’re looking for) would you mind providing a CodeSandbox of what you’ve tried (just minimum necessary to reproduce) so that we can take a closer look? We provide this starter template for InstantSearch.js.

1 Like

Thank you Maria for your answer.

Like you said the key to my solution is based on the routing option which makes the URL para accessible on the page.

To add to this we can then to control the display of records on the page with help from conditional displaying here:

Thanks a lot

Best
Herra Jón

1 Like

Sounds like you got it to work! :partying_face: Would you mind posting the link whenever you’re finished developing so that we can check out what you did?

Let us know if you had any outstanding issues!

Yes everything went dandy. Sure I will post a link when this project is done.