NumericFilter

This is for:

Developer

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

Methods

clear

Clears the current filter.

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 NumericFacet controller.

Properties

  • 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'

    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

Example Implementation

numeric-filter.fn.tsx

import {useEffect, useState, FunctionComponent, Fragment} from 'react';
import {NumericFilter as HeadlessNumericFilter} from '@coveo/headless';
 
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} />;
 * ```
 */