Filtering via dropdown for nested properties / array-elements


I´m looking for a solution where I can have a filter-dropdown like the MenuSelect, based on a property (categories) with values in an array:

// index
    categories: ['news', 'sports'],
    categories: ['culture'],

The dropdown I need to generate:

// Markup
  <option value="categories:culture">culture</option>
  <option value="categories:news">news</option>
  <option value="categories:sports">sports</option>

Querying the index after filtering via the dropdown by the user will be done via filters-parameter

But I have no clue how to fill the dropdown with the required filters (categories).

Any hints?

Thank you very much!

Hi there!

As you’ve found out already, the MenuSelect is a built-in InstantSearch widget which allows you to render a dropdown and let your users filter by a specific value (e.g., only retrieve records which have a category attribute that includes the value sport). You don’t have to re implement this logic yourself. Instead, you can leverage our faceting feature to compile facets values for a given attribute, then use the MenuSelect widget with that attribute.

Here are some helpful resources:

So, for instance, if in your records you have a categories attribute like this:

  categories: ['Sport', 'News', 'Culture']

You can use the categories attribute for faceting, which will compute all possible values for that attribute in your index. Then, you can use the menuSelect widget (implementation changes whether you’re using vanilla JS, React, Vue, or Angular):

  container: '#menu-select',
  attribute: 'categories',

Here’s how it looks like:

You can customize the UI to make it look exactly the way you want to.


thank you!

I found out that already - nice!