Show refinements even if search doesn't return any matching results

Open Q&A
,
#1

Hello,

I have an issue with RefinementLists using vue-instantsearch not showing any options whenever the search has no results.

To reproduce :

  • Go to Storybook
  • Select “Samsung” in the refinement list
  • Type a random word that doesn’t match any result in the search, for example “BBBBBB”
  • No results will be found and the refinement list will disappear.

In this case, the user can’t disable any refinements they would have chosen before searching.

Is there a way to still show the complete refinement list to let the user see the one enabled and uncheck them if necessary?

Thanks for your help!

#2

This is how the refinement lists work by default. The pattern here is to show all active refinements using ais-current-refinements | Vue InstantSearch | Algolia

Then the user can remove filters of they’ve ended up in a no-results situation.

Here’s a Storybook showing this widget in action:
https://vue-instantsearch.netlify.app/stories/?selectedKind=ais-current-refinements

#3

Hello Chuck, thank you for the answer!

I already used this widget in my search, it’s a good solution to show currently enabled filters when there’s no result, but if there are results, it duplicates the information since enabled filters are both shown in the refinement list & on the widget.

Anyway, I guess there’s no easy solution to my issue if not for a custom workaround.

I hope someday there will be an option in ais-refinement-list that would let us choose if filters should stay visible with no results.

Thanks again!

1 Like