Allowing user to exclude facets from search using refinementList

I want to support a scenario where a user can exclude tags from the search. Ideally, it would be using the existing refinementList (or extending it).

Here is a CodePen that basically behaves I want. For example, click the red ‘x’ next to ‘Used’ to exclude records tagged ‘Used’. http://codepen.io/billvieux/pen/QKWWqy

However, this is a terrible implementation. I modified the refinementList item template to include a link in the label along with the tag name. Then I get the tag name during the click: $(document).on('click','.ais-refinement-list--label a', function(e){ search.helper.addFacetRefinement('tags', '-' + $(e.target)[0].dataset.tag); search.helper.search(); });

I had to use the -tagname syntax with addFacetRefinement to ensure that the tag was removed from the refinementList. When I tried to use addFacetExclusion the hits were correct, but the refinementList and currentRefinementValues widgets didn’t work as expected.

I also had to keep the link inside the <label> as moving it outside the label seemed to always result in both the tagname and -tagname refinements being added. (I saw refinementList has to do some work as-is to avoid double responding to a click.)

Cons: This uses a global document bind to watch for click events, has a small target area to click for exclusions (and that link can’t be outside the <label>, and currently allows the user to select a tag & then exclude it, thus getting 0 search results.

For a scenario like this, I would really welcome any suggestions on better ways to approach the implementation or achieve this kind of behavior.

[vvo]

@billvieux I detailed a bit more doing a custom widget in another thread: https://github.com/algolia/instantsearch.js/issues/868#issuecomment-188206988.

Once you get the three methods, the helper and you are able to do a bit of JS/jQuery you should be good.

Ask any other question in other issues about building custom widgets if you have.

Thanks!

[bobylito]

AddFacetExclusion is using the - syntax are you: https://github.com/algolia/algoliasearch-helper-js/blob/develop/src/requestBuilder.js#L188-L192 . So this is weird to experience a different behaviour.

The way you did the prototype is not really orthodox 😃 And leads to some weird behaviour. This is likely to be cause by the way this widget is implemented. There are two alternatives here, either you create a proper custom widget or you wait for such a feature to be implemented, given our bandwidth and the complexity of making a nice API for that, I’m not sure that we will implement it in the coming days.

I’m pretty confident that you can make a straightforward refinement list custom widget that will fit your need.