Autocomplete.js dropdown with hits and facets for those hits

I would like to have an autocomplete for product search and in the dropdown list with product hits, also display facets such as brands and categories for those products.

I have been using

and have tried with

  • source: $.fn.autocomplete.sources.hits(hitsIndex, {
  • source: function(query, callback) {hitsIndex.search({
    but have not been able to find away to process the results such that I am able to extract the facets

With

instantsearch.widgets.hits({

there is

  transformData: {
      allItems: function(data) {

where this can be done

newData.abrandlabels = data.getFacetValues('abrandlabels', {sortBy: ['count:desc']}).slice(0, 5);

Is there something similar in autocomplete.js?

1 Like

Hi Andrew,

For us to understand better your problem, could you explain what you mean by “display facets such as brands and categories for those products”? Could you provide as well an example of expected result?

Looking forward for your reply,

What I have at the moment is separate searches, but what is required is the categories and brands from the products in Suggested Products column

Hey there, autocomplete.js has the concepts of “cursom sources”: https://github.com/algolia/autocomplete.js#custom-source. Custom sources are just functions that will receive the query the user provided in the autocomplete menu and are able to retrieve any data and then display it.

So in your case, you would create a custom source that would use either:

By doing so you’ll be able to create a menu where you display not only the hits but also the facet values matching the query.

Thanks!