Turn off Automatic Filtering and Boosting with React InstantSearch

This version of React InstantSearch has been deprecated in favor of the latest version of React InstantSearch.

Automatic Filtering and Boosting applies a category filter when users enter a query. You can use Query Categorization to predict categories for your most popular queries. If you enable Automatic Filtering and Boosting the categories are automatically applied as filters.

Controlling Automatic Filtering and Boosting in your UI

If you want to have Automatic Filtering and Boosting on or off for all searches, you only need to enable the feature to filter the results automatically.

If you want to let users turn Automatic Filtering and Boosting on or off, you can build an InstantSearch widget. This widget should inform users that the results are filtered. The widget should also let users remove any applied filters.

Building a widget for Automatic Filtering and Boosting

There are three steps to building an Automatic Filtering and Boosting widget:

1. Check the search response. The search response includes the following properties if Automatic Filtering and Boosting is enabled:

   JSON

   Copy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
    {
      "extensions": {
        "queryCategorization": {
          "autofiltering": {
            "facetFilters": [],
            "optionalFilters": []
          }
        }
      }
    }
   

   If filters are applied to the query, they’re listed in the facetFilters property.

   JSON

   Copy

   1
   2
   3
   4
   5
   6
   7
    {
      "facetFilters": [
        "category.level0:Fresh products",
        "category.level1:Fresh vegetables",
        "category.level2:Tomatoes"
      ]
    }
   

2. Let users remove applied filters. To remove filters applied with Automatic Filtering and Boosting, you need to turn the feature off for the current query using the enableAutoFiltering API parameter.

   JSON

   Copy

   1
   2
   3
   4
   5
   6
   7
    {
      "extensions": {
        "queryCategorization": {
          "enableAutoFiltering": false
        }
      }
    }
   

3. Turn on Automatic Filtering and Boosting for new queries. To keep Automatic Filtering and Boosting for other queries, you must first check for a query change and then set enableAutoFiltering to true.

Implementing the widget

The following custom connector, built with the createConnector function, implements all three of the preceding steps

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
// connectAutoFiltering.js

import { createConnector } from 'react-instantsearch-dom';

export const connectAutoFiltering = createConnector({
  displayName: 'AutoFiltering',
  $$type: 'algolia.beta.autoFiltering',
  getProvidedProps(_props, _searchState, searchResults) {
    const results = searchResults.results;

    // empty results case
    if (!results) {
      return {
        appliedFilters: [],
      };
    }

    // Retrieving the applied filters (step 1)
    const facetFilters = results.extensions?.queryCategorization?.autofiltering
        ?.facetFilters || [];

    return {
      appliedFilters: facetFilters.map((facetFilter) => ({
        name: facetFilter.split(':')[0],
        value: facetFilter.split(':')[1],
      })),
    };
  },

  // the function we use to set the query parameter (step 2)
  refine(_props, searchState, nextRefinement) {
    // storing in the state the disabled query
    this.disabledQuery = searchState.query;

    return {
      ...searchState,
      autoFiltering: nextRefinement || false,
    };
  },

  getSearchParameters(searchParameters, _props, searchState) {
    // enabling back auto filtering if the query has changed (step 3)
    if (
      this.resetAutoFiltering &&
      this.disabledQuery &&
      searchState.query !== this.disabledQuery
    ) {
      this.resetAutoFiltering = false;
      this.refine(true);
    }

    if (!searchState.autoFiltering) {
      this.resetAutoFiltering = true;
    }

    return searchParameters.setQueryParameter('extensions', {
      queryCategorization: {
        enableAutoFiltering: searchState.autoFiltering,
      },
    });
  },

  cleanUp(_props, searchState) {
    const { autoFiltering, ...nextSearchState } = searchState;
    return nextSearchState;
  },
});

With this connector, you can then build your UI component.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// AutoFiltering.jsx

import React from 'react';
import { connectAutoFiltering } from './connectAutoFiltering';

export const AutoFiltering = connectAutoFiltering(
  ({ appliedFilters, refine }) => {
    /**
     * Here we choose to display the applied filters in a banner with a button to disable autofiltering.
     * We are displaying only the last filter of the hierarchy, but you can chose to display all of them if you want to.
     * It is entirely up to you how you choose to render the filters.
     */

    return appliedFilters && appliedFilters.length ? (
      <div
        style={{
          border: '1px solid lightgray',
          borderRadius: '3px',
          margin: '1rem 0',
          padding: '1rem',
        }}
      >
        <span>
          <strong>Applied filter:</strong>{' '}
        </span>
        <span>
          {appliedFilters.pop().value}{' '}
          <button onClick={() => refine()}>&times;</button>
        </span>
      </div>
    ) : null;
  }
);

If you have a standard React InstantSearch implementation, you can copy and paste both the preceding snippets into your application. However, ensure you tweak the final <AutoFiltering /> component to fit your design.

You can then place <AutoFiltering /> in your application.