Option to select "all" or "others" in ais-menu to query algolia accordingly

instantsearch
facetfilters
angular6
ais-menu

#1

I have a location list which i display to the user (for example: New York, Mumbai, Beijing). I add a static value to the list “Others”. On selecting “Others”, i wish to trigger a search that excludes “New york, Mumbai and Beijing” and display all other locations. Is there a way to do this in the front-end or backend or dashboard?

Similarly, the fourth option can be “All”. On selecting this, the user should be able to see all the locations including New York, Mumbai and Beijing.

Is there any functionality that i can use to implement this? I could find no code example for this.


#2

That depends on which frontend implementation you are currently using. Can you show what you have so far in a sandbox? In case you are using InstantSearch.js, here’s a template you can use: http://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/instantsearch.js


#3

Here is the sandbox: https://codesandbox.io/s/101ozk5wqj?fontsize=14

I have included the problem statement in the heading as well. I am using the angular instantsearch framework.


#4

Hi,

This is not something that is easily possible with the default widget.

You have to extend the ais-menu widget. You’ll have full control on the render but also on the behavior since it’s your responsibility to refine the values. It means that you can render two specific items “Ohters” & “All” with a specific behavior once you clicked on it. For the element “Others” you can use the NOT operator to correctly filter the results. Here is a guide that explain how to extend widgets.

Hope that helps!


#5

Do you have a short snippet of working example for the same? The “extending widget” shows example to render the values on the UI but not on how to catch the selected value and applying a custom refinement based on that.

Any working example on above criteria in angular framework will help a lot!


#6

Hi @zaheer,

Here is an example that show how to implement the behaviour for “All”. Note that with this example we can’t support the “Others” behaviour because we don’t have the full control on the refine function. You have to create a custom connector to support it. We have a dedicated guide about that inside the documentation.

Hope that helps!