Stats and autocomplete

Hi,
i use autocomplete.js, these are my imports:

<script src="https://cdn.jsdelivr.net/npm/algoliasearch@3.32.0/dist/algoliasearchLite.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>

Previously I used instantsearch with this plugin:

search.addWidgets([instantsearch.widgets.stats({
    container: "#stats",
    templates: {
        text: "\n  {{#hasNoResults}}0 articoli{{/hasNoResults}}\n   {{#hasOneResult}}1 articolo{{/hasOneResult}}\n   {{#hasManyResults}}{{#helpers.formatNumber}}{{nbHits}}{{/helpers.formatNumber}} articoli{{/hasManyResults}}\n  trovati in {{processingTimeMS}}ms\n    "
    }
})]);

is it possible to use the same plugin or somehow view the stats with autocompleteJS?

The only way that comes to mind is to also implement instantsearch just to use this plugin.

Hey @giacomosilli
If you just need to have access to the stats you can use the results argument passed to the footer or header:

autocomplete('#searchBox input[type=search]', { hint: false }, [
  {
    source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
    displayKey: 'name',
    templates: {
      suggestion(suggestion) {
        return suggestion._highlightResult.post_title.value;
      },
      footer({ query, isEmpty }, results) {
        return `<small>${results.nbHits} results</small>`;
      },
    },
  },
]).on('autocomplete:selected', (event, suggestion, dataset) => {
  console.log({ suggestion, dataset });
});

I’ve made a quick codesandbox to showcase this:

Thanks, very clear, I managed to implement it without problems.

I’d like to show the number of items outside the menudropdown (fixable with jquery) but before I search.

Like the widget for instantsearch, when I load the page, before clicking on search input or before searching, I would like to show the number of articles.

it’s possible?

unfortunately, for that use case, you will need to use InstantSearch.js. The Autocomplete is not powerful enough for this use case.

Here is how you implement an autocomplete with InstantSearch.js:

Thanks for your help.