Displaying all hits for a specific facet value without refining the search

Open Q&A
#1

Hi,

First - thanks for the very useful library/API on React, helped to speed up our development!

We have a search for which we can filter/facet by ressources. The user can either filter it through the filter column on the left side through a RefinementList component. as per the screenshot below

We wanted an easier way for the user to navigate the results, therefore we decided to implement the tab that you see on the screenshot. Whenever the user selects a ressource type in the tab we want to display all the corresponding Hits - we do this for now by using a Menu component and refining the search with the type.

The issue with this current implementation is that the ressources filters and the tabs are conflicting with each other refine. (which is the expected behaviour, I understand)

I’m therefore looking for a solution where I could have my filter on the left selecting XYZ ressources types, and allow the user to navigate through those all those results type (through an infinite hit component) without affecting the filter on the left.

any help appreciated - thanks !

Screenshot 2020-11-26 at 15.27.01
Screenshot 2020-11-26 at 15.27.013160Ă—1304 459 KB

#2

Hi matthieu,

If I understand well, you want a “frontend filtering” to allow user to narrow the results without narrowing the actual search query.

You have one good way of doing it: doing filtering in the widget.
If you modify the Hits components (for example in transformItems) and apply the filter yourself based on the tab, you will achieve this without too much effort. Simple and effective.
See documentation

#3

Thanks Samuel

Yep you got it right with what I want to achieve.

I’m trying to achieve that using InstantSearch in React. The only transformItems I see provided are on the components like Menu, RefinementList which therefore allow me to customize the items (/facets ?) within their own scope.

But I don’t see any corresponding API which would allow me to filter items within Hits or InfiniteHits - as per the doc.

#4

Indeed it’s a bit different when using premade component (like with React instantsearch) you will need to implement your own component unfortunately.
But it’s quite simple following this example


The relevant part for you is to filter in hits.map

However please mind that pagination might be “broken” because the hasMore prop will not reflect your manual filtering.

#5

Oh I see where lies the confusion. I don’t want to filter the hits received by Hits or InfiniteHits per see as this will only filter the first chunk of results received (and bring inconsistency as there might not have any hits related to the specific tab I selected in this chunk)

I would like to have a front end filtering which acts before the hits being forwarded to any Hits component - making sure the hits received are only for this type. (and yes that sound like refining the search… which is what I try to avoid)

#6

Hi @matthieu.veillon, you may have to customize one of the existing widgets, such as the Hits or Infinitehits to build your custom filter. You can find the documentation about customizing an existing widget here.

#7

Thanks for all your replies - we finally found a solution in using
<Configure /> with optionalFilters which allow us to rank first the results for the type corresponding to the current tab. After that it’s just a matter of filtering the results to make sure no other types are displayed.

1 Like