Implement DocSearch instead of Algolia Dropdown Menu

Hello,
some time ago I opened this topic:

I wanted to implement the Algolia InstantSerach Snippets in the Algolia Dropdown Menu. It wasn’t possible though, so I created my own custom menudropdown using Algolia InstantSearch.

The main problem is that it does not support links or there is a bug related to this functionality.

But I just found out about the existence of DocsSearch. It looks really interesting. I would like to implement a Dropdown menu exactly like the one at the top right of DocSearch, I see that it also uses Snippets.
I also noticed that algolia.com/doc/ also uses Snippets in its dropdown menu, is it DocSearch?

How do algolia/docs and DocSearch use the dropdown menu with snippet, links and keyboard actions?

It is not clear to me, however, how to configure the script and get an example code html/css/js to proceed with the implementation.

Thank you

Sorry for the previous answers, but while snippeting isn’t built-in to autocomplete, it is possible:


autocomplete('#searchBox input[type=search]', { hint: false }, [
  {
    source: autocomplete.sources.hits(index, {
      hitsPerPage: 5,
      attributesToSnippet: ['name:2'],
      snippetEllipsisText: "…"
    }),
    displayKey: 'name',
    templates: {
      suggestion(suggestion) {
        return suggestion._snippetResult.name.value;
      },
    },
  },
])

Thanks for your answer,

is it also possible to use links? or are there still bugs?

In the meantime I’m studying DocSearch, it’s really interesting. Do you recommend it or is it better to stay on autocomplete?

EDIT:
Well docsearch is great but the free plan for a site with at least 1000 articles and documents isn’t enough.
For the moment I am trying the code snippet suggested by you. Thank you

Hi @giacomosilli, when you say “use links” do you mean add links for each item in the drop-down? If so, you should absolutely be able to do this by modifying the suggestion template. The suggestion template takes a function in which you can return HTML such as an anchor element. I have edited @haroen’s template here to show this. (Currently not linking to anywhere, but you could use url attribute to fill this in, for example.)

Let us know if you meant something different!

1 Like

Hi, I have already managed to implement it thanks.
I asked this question because as you can read in the initial topic that I linked there was something wrong or some bug.

Thank you

Well I have a last question, I implemented your example code exactly by changing the template.

The X icon and the magnifying glass icon for the search are not displayed.

Why?