NumericFilter (Search Engine)

This is for:

Developer

Example Implementation

numeric-filter.fn.tsx

import {NumericFilter as HeadlessNumericFilter} from '@coveo/headless';
import {useEffect, useState, FunctionComponent, Fragment} from 'react';
 
interface NumericFilterProps {
  controller: HeadlessNumericFilter;
}
 
export const NumericFilter: FunctionComponent<NumericFilterProps> = (props) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
  let startRef: HTMLInputElement;
  let endRef: HTMLInputElement;
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  const {range} = state;
 
  return (
    <Fragment>
      <input
        key="start"
        type="number"
        ref={(ref) => (startRef = ref!)}
        defaultValue={range?.start}
        placeholder="Start"
      />
      <input
        key="end"
        type="number"
        ref={(ref) => (endRef = ref!)}
        defaultValue={range?.end}
        placeholder="End"
      />
      <button
        key="apply"
        onClick={() =>
          controller.setRange({
            start: startRef.valueAsNumber,
            end: endRef.valueAsNumber,
          })
        }
      >
        Apply
      </button>
    </Fragment>
  );
};
 
// usage
 
/**
 * ```tsx
 * const controller = buildNumericFilter(engine, {
 *   options: {
 *     field: 'size',
 *   },
 * });
 *
 * <NumericFilter controller={controller} />;
 * ```
 */

The NumericFilter controller makes it possible to create a numeric filter.

Methods

clear

Clears the current filter.

disable

Disables the filter. I.e., prevents it from filtering results.

enable

Enables the filter. I.e., undoes the effects of disable.

setRange

Updates the selected range.

Parameters

Returns boolean: Whether the range is valid.

subscribe

Adds a callback that’s invoked on state change.

Parameters

  • listener: () => void

    A callback that’s invoked on state change.

Returns Unsubscribe: A function to remove the listener.

Attributes

state

The state of the NumericFilter controller.

Properties

  • enabled: boolean

    Whether the filter is enabled and its value is used to filter search results.

  • facetId: string

    The facet ID.

  • isLoading: boolean

    Returns true if a search is in progress, and false if not.

  • range?: NumericFacetValue

    The current selected range.

Initialize

buildNumericFilter

Creates a NumericFilter controller instance.

Parameters

  • engine: SearchEngine

    The headless engine.

  • props: NumericFilterProps

    The configurable NumericFilter controller properties.

Returns NumericFilter

NumericFilterProps

The configurable NumericFilter controller properties.

Properties

NumericFilterOptions

The options for the NumericFilter controller.

Properties

  • field: string

    The field whose values you want to display in the filter.

  • facetId?: string

    A unique identifier for the controller. By default, a unique random ID is generated.

  • filterFacetCount?: boolean

    Whether to exclude folded result parents when estimating the result count for each facet value.

    Default: true

  • injectionDepth?: number

    The maximum number of results to scan in the index to ensure that the facet lists all potential facet values.

    Note: A high injectionDepth may negatively impact the facet request performance.

    Minimum: 0

    Default: 1000

NumericFilterInitialState

The initial state.

Properties

NumericFacetValue

Properties

  • end: number

    The ending value for the numeric range.

  • endInclusive: boolean

    Whether or not the end value is included in the range.

  • numberOfResults: number

    The number of results that have the facet value.

  • start: number

    The starting value for the numeric range.

  • state: 'idle' | 'selected' | 'excluded'

    The state of the facet value, indicating whether it is filtering results (selected) or not (idle).

NumericFilterRange

Properties

  • end: number

    The ending value for the numeric range.

  • start: number

    The starting value for the numeric range.

Unsubscribe

Call signatures

  • (): void