docs: Help on creating filters and showing them in the UI

[ArthurFlag]

Hi!

I'm looking for more information on how to create filters (I think that's what I need?) and how to display them inside Docusaurus specifically. An example of what I mean is available on the Readme website, where we can search by docs category.

The filters docs on the Algolia website seem to only mention how to create them in the index but the end of the story seems missing: how to display them to users.

I'm happy to open a PR here to add a tutorial. I think it's a high value tutorial for most docs websites using your product 👍

[shortcuts]

Hey @ArthurFlageul !

There is indeed no built in way to display search filters in the DocSearch UI. You could achieve this by importing the components and adding your own logic to them (there is some good example on the Algolia doc).

The Readme website uses React InstantSearch, which is a great way to bind filtering with the Algolia search. If you are looking for a more custom implementation than DocSearch, its underlying library, Autocomplete would be a perfect starting point

[janczizikow]

Would it be possible to add some kind of option, to render own UI inside DocSearch? Or the recommended way for more custom UI is to fork DocSearch/use Autocomplete to build it?

[shortcuts]

Would it be possible to add some kind of option, to render own UI inside DocSearch?

As of now, we provide one option at the root level to inject custom code in the footer (see https://docsearch.algolia.com/docs/api/#resultsfootercomponent).

Or the recommended way for more custom UI is to fork DocSearch/use Autocomplete to build it?

The easiest way is to import the components yourself, you can then build the UI how you want, many of our users does it this way (react, mui etc.)

I'd however recommend Autocomplete if you want to go with a fully customized implementation