Keep all filters, even if no results

Are there any way that you can configure Instantsearch (vanilla or react) to show filters, even though there are zero results for that filter. If you see this video you’ll see that once I filter down on ‘mirror’, there are a lot fewer categories shown. I want the categories to be shown, event though they are empty.

1 Like

Hi Andreas,

This feature is core to the search experience, the engine returns only the meaningful filters for the current search. If a user clicks on mirror, the intention of the user is to get a mirror, if a category does not contain products that match, the user do not want to go to this category. If you want to fix the categories, you can hard code them.

Maybe something I can add on @Bobylito answer, is that we sometimes see implementations where no-available filtering / facet values are displayed as disabled: in gray, and not clickable.

@andreas If you don’t want to hard code the values, you could build a custom component & template that performs the following steps:

  1. Make an empty query, which will return a list of all possible facet values in the response body.
  2. Store the list of facet values in a variable or your application’s state somewhere.
  3. Using that data, create a template that draws a checkbox and label for every facet value.
  4. Refresh that template on each query response, to change the item counts and disabled state of each facet value. If the facet value is not in the query response, it should be disabled / grayed out. If the value is in the query response, then the item count should be updated.

@Bobylito @alex have we seen this done before, are there any caveats you know of?

1 Like

@alex That is exactly what I want to do. Do you know about anyone who have done this before? Sounds very cumbersome to make a custom component for such a widely useful feature.

@Bobylito
I think that is a much better user-experience than hiding it completely. It should at least be configurable. It makes sense to hide it completely if you have hundreds of filterable items, but if there are only 4-5 categories, I’d like to show them all to the user, even though if they are grey/disabled. It gives the user an idea of what categories exist on the page.

3 Likes

Agree with you @andreas that its something it could be great having out of the box.

@Bobylito do you think its something we could consider adding to our InstantSearch libraries?

@Bobylito @alex any updates on this?

Am I understanding it correct, that this “feature” was added in React InstantSearch v3 React InstantSearch 3.0.0 ?

Hi @andreas, the feature was not added to react instantsearch sorry if the changelog led you to understand that (which part?).

This feature is not part of InstantSearch future right now. We do not have a precise idea of the complete behaviour of such feature. Thus we cannot easily implement it, we need clear guidance on how the feature should work in all the widgets and edge cases that could happen.

Let’s start with an example. When dealing with a refinementList, you start with 5 displayed categories.

query:
categories:

  • fruits 30
  • electronics 20
  • tvs 10
  • watches 5

query: me

  • fruits 2
  • tvs 2
  • electronics 0 (non clickable)
  • watches 0 (non clickable)

query: melon

  • fruits: 2
  • electronics: 0 (non clickable)
  • tvs: 0 (non clickable)
  • watches: 0 (non clickable)

Allright, I was able to keep electronics and tvs and watches inside a JavaScript object to keep displaying them. Now I copy paste the url and give it to google or a friend and they use it. What happens?

query: melon

  • fruits: 2

I am missing electronics, tvs and watches because the API is not sending them to me, so I would need to do an empty query request first to get them.

That’s a fair amount of work and will require us to do many hacks and multiple requests in many other places. I would rather see this implemented by the REST API.

What do you think @alex?

I think that it could be nice to approach it from the front-end for now, performing an additional empty query when it’s the first time the component get rendered. (as suggested by @dzello and you @vvo). In the end, I see it as something similar to the way we handle disjunctive facets today.

That being said, I agree with you that it would be interesting having an internal chat see if that’s something it could make sense to add at the REST API level.

=> As a short-term solution, do you think it’s something we could add to React InstantSearch, and InstantSearch.js @vvo?

1 Like

We would first need to design this feature in the JS helper and have a good API proposal on it. Before we can implement it in react instantsearch or instantsearch.js.

@Bobylito what’s your take on that? Do you think it’s something we could start thinking how to integrate at the helper level?

Hello,

Was this ever implemented? I’ve come to the conclusion that it’s more user-friendly to continue showing all filters even if there are no results. I felt like something was “off” with my application (New Jersey Monthly Directory | s%), and I think the disappearing filters is the thing.

With the way that it’s set up, now, the user has to uncheck their current filter to see all the filters in other facets. For example, if they select a category with only one item in it, all the other filters (Awards, Rating, and Best For) will disappear. This is even more confusing for someone just coming to the page from Google or somewhere else. Also, I was able to prevent the current facet type (category) from removing the rest of the categories, but if someone’s just visiting that page from Google, they’ll just see that one category.

I couldn’t put my finger on why my application was so confusing to use, but I think this may be it.

Here’s my application:New Jersey Monthly Directory | s%

You can see how, if someone was just visiting it, they would think that the number of restaurants in this database are severely limited because all the facets are almost gone.

Here, it looks like the facets in the same facet type all display, but the rest of the facets disappear: Find a Doctor Near You - Washingtonian

It looks like Yelp grays out their filters that are not relevant.

I don’t think the answer is very straightforward, though. For example, if I’m searching for web designers, I don’t want to see grayed out results for Mexican or American (restaurant categories).

I think the solution would be to have one master facet (for example, the section is the master facet for my application). The master facet could be restarurants, web designers, computers, etc. I guess, you would have to make one API call with the master facet selected to get all relevant categories, awards, and ratings (and therefore remove the irrelevant, empty facets). Then, another API call would have to be made with the facets that are actually selected. At that point, it would be okay to show facets with no results, but they would have to be grayed out and not clickable (or at least show the count).

So, if Algolia was to implement the option to show all facets (whether there are results or not), it would also be good to have the option to set a master facet, so that irrelevant facets don’t show up.

I guess what I’ll have to do for my application is first get all the facets (categories, awards, and ratings) for a certain section (like restaurants), and then make a second call to get the counts for the facets by using the currently selected facets and update the master facets list. It will be complicated, but I am almost certain that that is the one thing that is making the application feel “off.”

It’s a complicated problem, so I can understand why there have been no solutions, but it would be awesome to see this feature in the future.

~David Richied

2 Likes

Hello,

Any update on this feature, it looks like there are some use cases where this would come very handy for the UI ie:

  • when possible facets are limited in number ( 10 categories )

An example to think of is a list of Location State checkboxes, say the index doesn’t have anything in New York so New York won’t show in the current algolia search engine setup, that user (especially if it’s a new user) would most likely be misled to think that the service ( app ) is not available in that state. On the other hand, if there was at least a greyed out option for New York it would show that there’s no data connected to New York.

Any thoughts on that?

Hi @khial.ali.hichem,
Afaik, this feature has not yet been developed out of the box, but I have a couple of suggestions that might help:

  1. Add a currentRefinements widget . The example @njmonthly provided earlier (New Jersey Monthly Directory | s%) can indeed be confusing, because other than the URL (which the user may not pay attention to), it is not clear that a facet ( category: “South American”) has already been selected and may be leading to a reduced set of results. Comparable example: instantsearch.js-app

Because “Property type: Igloo” has been selected, it looks like there’s only one “Room Type” available.

Adding a currentRefinements widget allows the user to know that a facet has been selected and that they may deselect it for more results:

https://62555.csb.app/?airbnb[refinementList][property_type][0]=Igloo

image

To make it even clearer, you could indeed show the “unavailable facet values.”

Though this does not exist out of the box, it is easy enough to make a custom widget to do it:
https://eglkq.csb.app/?airbnb[refinementList][property_type][0]=Igloo
image

See lines 14 - 73 of app.js here. (Note that in this case, instead of making a call to retrieve all values, I simply hardcoded the 3 possible values of “room type”)

I’ve submitted this feedback to our product team, so perhaps it will exist out of the box at some point.

Hope this helps!

2 Likes

Hi there,
I am happy to tell you all about a recent update on our documentation.

Please find “Display facets with no matches” section in the following URLs:

InstantSearch.js:

React-InstantSearch:

Vue-InstantSearch:

Angular-InstantSearch:

I hope this helps!

2 Likes

React link no longer works

In case anyone is as novice as me and was confused about this, there now is this config that you declare when setting up the client: {keepZeroFacets: true} //defaults to false. Not sure when it was implemented, but there we go.

1 Like

hello @markus how did you find that config? Can’t find in anything on the docs

@markus broo help me. how to set up this. please share code and steps…