Facet Searching like the Algolia Indice Browse UI

I’m messing with some sample data at the moment trying to validate Algolia for a potential idea. I’m looking to create a search UI similar to that of the Algolia Indice browser. However, no matter what I try I’m not able to replicate the same behavior (which is quite difficult to describe)…

Essentially what I’m trying to replicate is the way the search allows you to check multiple values for a facet.

When I perform a search with facetFilters the new facets returned in the response strip all other values for the selected facet - which makes sense as I’m filtering by it… How do I simulate the behavior in the Algolia Browse UI though? Where I’m able to show additionally available facet values?

Is there some sort of guide to replicating this?

Hi @absolutehype, I’m not sure I understand what you mean. Could you provide a codesandbox that demonstrates the issue you are having and more information about what you would like to happen instead? One solution may be to use disjunctive faceting, but I may be misunderstanding your issue.

We have codesandbox starter templates here.

I’m now performing multiple queries, one with the full facetFilters in order to get back to relevant results, and then a search for each facet that excludes it’s own facetFilters… Hope that makes sense.

I do feel like this would be good if it were documented.

// Fetch Results
{
    indexName: 'dev_BOAT',
    query: '*',
    params: {
        facets: '*',
        facetFilters: [
            ['type:Sail', 'type:Motor'],
            ['fuel:Petrol']
        ]
    }
},
// Facet Counts
{
    indexName: 'dev_BOAT',
    query: '*',
    params: {
        facets: 'type',
        facetFilters: [
            ['fuel:Petrol']
        ]
    }
},
{
    indexName: 'dev_BOAT',
    query: '*',
    params: {
        facets: 'fuel',
        facetFilters: [
            ['type:Sail', 'type:Motor']
        ]
    }
}

I’m then merging the facets in the response, this gives me something like this.

Where as previously I got something like this

1 Like