Standalone autocomplete

Hi there, I’m building a UI search with Algolia leveraging instantsearch.js with many custom widgets and it’s working great but i’d like a specific UX behavior and I’m not sure how to this properly.

Among the widgets I’m using there is the autocomplete. And I’d like this one to be standalone. I don’t want the content of the autocomplete query to be refined by the other filters the user has selected. It must query on the whole database (which is not the case in my current implementation)

Is there a good practice to do so ?

Thank you in advance for your insights

Hi @jonathan3,

Thanks for contacting Algolia. In general,

  • autocomplete.js triggers a search and displays a dropdown of options and it is separate from the search results page;
  • instantsearch.js with all the widgets is that results page which is affected by all the filter/facet selections

They are generally not one-in-the-same and therefore appear to fit your needs as-is.

For example see our widget showcase which has both an autocomplete sample, and an instantsearch example (where the search uses the searchBox widget and not autocomplete).

Are you referencing different ways to use these libraries?

Let us know how you are approaching it differently if we aren’t understanding correctly. A codesandbox can be helpful.

Hi @ajay.david,
I’m not leveraging autocomplete.js.
I developed a custom autocomplete widget as explained here : https://www.algolia.com/doc/guides/building-search-ui/resources/ui-and-ux-patterns/in-depth/autocomplete/js/

Doing like this the search results inside the autocomplete dropdown are affected by the filters selection previously made
For instance, if i’m in the vegetable category, I won’t get any items from the fruits category in the autocomplete dropdown.

Is there a built-in option in the autocomplete widget to search regardless the others filters ?

Ok I think a find a way to do it. I need to use a new instance of instantsearch, thus the autocomplete results wont be pollute by the rest :wink:

1 Like