Refinement-list instantsearch.js 'negative checkbox'

Hi guys!

Who ever made instantsearch.js well done! I checked refinement-list and it allows to make OR / AND mode all clear.

In my specific case I would like to use AND but also allow people to check what they do NOT want for example

[+] include | exclude
[ ] Milk [ ]
[ ] Sugar [ ]
[ ] Stevia [ ]
[ ] Peper [ ]

so user could click right or left and add + or - is there refinement widget like that already done if not would somebody make it :slight_smile: please.

The other design pattern would be to use checkbox like kind of toggling button on first click is + then if clicked again - and then again back to neutral.


Thanks for the kinds words! Unfortunately we don’t have a feature like that in our engine, but technically you could work around it, by also indexing not: {...attributes} on each record. Then you can have a second refinementList for that second attribute, roughly.

Does that help you further?

That sounds interesting but list of ‘ingredients’ is like 1200 - 1500 unique records so adding ‘negative_ingredients’ could be little bit overkill don’t you think :slight_smile: you have negative keywords -something but as I understood facets you do not have negative ok that’s fine we will figure out what to do.

Yep, I’m sorry that this won’t be possible right now. It does seem useful for avoiding certain ingredients.

I put this on our internal requests board by the way :slight_smile:

1 Like

Hello @zoransa,

It is actually possible to negate filters by using the Algolia API. The filters attribute can be used with and SQL-like syntax that accepts the NOT keyword to negate a filter (see documentation here). We also have syntactic sugar in instantsearch.js where you can add a - (minus sign) before a facet to negate it.

Unfortunately, we do not have a UI widget that embeds all that directly, you will have to build your own custom widget. That being said, if you go that route, we would be very interested if you could share what you build. I think this is a very valid use-case, but building the best UX on top of it can be tricky.

1 Like

Hey thank you this is absolutely awesome… well it is not implemented in instantsearch.js I have to see how hard it is to expand functionality.