Facet/Filter negative (AND NOT) in React Instant Search

I’ve seen when looking at the algolia docs that for facets it’s possible to say, for e.g.

index.search({
filters: 'category:Book AND NOT category:Ebook'
});

But I can’t figure out how I would apply this behaviour through React Instant Search?
Are there any demo’s or documentation around it? Would I have to apply everything to configure?

Thanks

Hi,

It is actually possible to negate filters by using the Algolia API like you found out.
We also have syntactic sugar in react-instantsearch where you can add a - (minus sign) before a facet to negate it.

Unfortunately, we do not have a UI widget that embeds a negative and a normal filter.

Can you explain me what type of UI would you like to achieve?

Cheers, Maxime.

Thanks for the response @iam4x.

I presume it’s not recommended to mix both the API and React InstantSearch version?

I am using the custom connectors to connect to the refinementList, and so when i refine the props, is that where i can add a - sign?

As a crude example, if we imagined we categorised countries flags by the colors they contain, then the very basic UI i’d be looking for something like this:

[ + ] [ - ] Red
[ + ] [ - ] Blue

Whereby a user can select they want to see items that are attached to the red category, but are not attached to the blue category. (So they wouldn’t see the french or american flag, but they would see the Italian flag for e.g.)

Does that make sense?

Thanks

I am having the same requirement. so it will be great to be able to see how to achieve this by React Instant Search.

As said, in React InstantSearch this is best achieved with a custom widget, you can have “+” and “-” buttons by computing what “value” is supposed to be for the negative refinement

operator should be set to AND when your dataset allows for it though, OR with negations behaves differently than you intuitively think :slight_smile:

@haroen Thanks. is it possible to have two separate Refinement list for one attribute, one is normal, and the other is negative? And also keep the checked/unchecked status separately as well.

I got a requirement with Include and Exclude Refinement Lists. the user can use each or combination of them.

In separate lists is actually simpler, you take what I have written, except you remove the label & checkbox for +

Note again that inter-widget refinements always are applied as OR. A possibility is to use a custom search client to transform the request to the shape you want though

1 Like

@haroen thanks very much! I come up with this, having separate CurrentRefinements list for each refinement. I customized the searchClient to make the negtive filter using AND.

One issue is that the items passed in my customCurrentRefinement list has duplicated items. I guess the reason is because I have multiple Refinement list for the same attribute. I can solve this by iterating the whole list and only show unique ones, is it a good solution or do we have alternative ways?

Another issue which I found is, every time I selected an item in the -brands list, the last item in that list will be removed as well. do you know the reason of it?

The reason one disappears is because the refinementList isn’t expecting the value with - to be in the list, therefore we need to double the limit and then slice on half, to make sure only non-- items are considered.

CurrentRefinements has a similar problem if you have two of the same widgets indeed, you can use transformItems there as well to deduplicate

1 Like

Hi @haroen, thanks for pointing that out. I see the issue.
I found that there is an operator prop in RefinementList, when I set it to ‘and’ for the negtive brand facet, the refinement list won’t load.
I thought it was similar to the ‘AND’ operation you mentioned in the custom search client for negative facet, but seems it’s not. can you explain more about how this operator works, is it possbile we use it for the negative RefinementList?

Thanks.

unfortunately we haven’t allowed two refinement lists on the same attribute to have different attribute, since the values can’t be requested efficiently, I think the best option might be to do this at the search client level

1 Like

thanks @haroen
another issue I am having is about the searchable prop, when I searching for an value, both the positive and negative facet list are affected.
This is the code.