How to implement category filter which allows for selection of multiple sub-categories

I need to implement a category filter which allows for selection of multiple sub-categories.
Basically, I have this drop-down where I use ais-menu:

Screen Shot 2020-11-17 at 1.51.03 PM

Now I need to provide the functionality to let the users drill down further. For example, for “restaurants”. We allow them to select what kind of cuisine they want: “italian”, “turkish”, “japanese”, etc. and it would look something like this:

Screen Shot 2020-11-17 at 2.01.23 PM

At first, I thought I could use the ais-hierarchical-menu, but upon closer look it seems that it only allows selection of one sub-category at a time.

Currently, my data looks like this:

Screen Shot 2020-11-17 at 2.02.43 PM

So each item can contain multiple keywords for drilling down further. These are all considered to be level 1 sub-category. So if a user selects “restaurants” then it should list all the filter_keywords added by all items for that specific category. Obviously, I still need to structure it in similar fashion with the one in the example here

[
  {
    "objectID": "321432",
    "name": "lemon",
    "categories.lvl0": ["products", "goods"],
    "categories.lvl1": ["products > fruits", "goods > to eat"]
  }
]

But that’s assuming I can use the ais-hierarchical-menu to implement this.

I’m thinking I could also use the ais-refinement-list like so:

<ais-refinement-list attribute="filter_keywords" />

But the problem with this is that it’s not connected to any category so it will always show all the filter_keywords I’ve ever added to all the items, instead of showing only the one’s that belongs to the currently selected category.

Can you point me in the right direction on how I could accomplish something like this? Thanks in advance!

Hi @ellis

Sadly, Multi-select hierarchical menu are going to be very complicated and probably not worth the effort. I have asked our InstantSearch team if they had any suggestions on how to do this or if it was even possible and the consensus was that this wasn’t possible because it would require too many requests (one per open leaf) and that the logic to manage it would be really complicated.

There have been some attempts internally but they all yield results that had these issues and we do not have a working example.

There may be other solutions to your use case that go a different route and that could still work. I had a look and tried to build a quick demo with two refinement lists (brand and type in my example, but could be category and filter_keywords for you), and I had them filter each other out correctly even with multiple selections.

Here’s the link to the codesandbox: https://codesandbox.io/s/blazing-microservice-q7odb?file=/src/App.js
It’s in React, but the code is very similar to what you’d write in Vue.