DidYouMean (Search Engine)

This is for:


Example Implementation


import {DidYouMean as HeadlessDidYouMean} from '@coveo/headless';
import {useEffect, useState, FunctionComponent} from 'react';
interface DidYouMeanProps {
  controller: HeadlessDidYouMean;
export const DidYouMean: FunctionComponent<DidYouMeanProps> = (props) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
  if (!state.hasQueryCorrection) {
    return null;
  if (state.wasAutomaticallyCorrected) {
    return (
          No results for{' '}
          Query was automatically corrected to <b>{state.wasCorrectedTo}</b>
  return (
    <button onClick={() => controller.applyCorrection()}>
      Did you mean: {state.queryCorrection.correctedQuery} ?
// usage
 * ```tsx
 * const controller = buildDidYouMean(engine);
 * <DidYouMean controller={controller} />;
 * ```



Apply query correction using the query correction, if any, currently present in the state.


Adds a callback that’s invoked on state change.


  • listener: () => void

    A callback that’s invoked on state change.

Returns Unsubscribe: A function to remove the listener.



The state of the DidYouMean controller.


  • hasQueryCorrection: boolean

    Specifies if there is a query correction to apply.

  • originalQuery: string

    The original query that was performed, without any automatic correction applied.

  • queryCorrection: QueryCorrection

    The query correction that is currently applied by the "did you mean" module.

  • wasAutomaticallyCorrected: boolean

    Specifies if the query was automatically corrected by Headless.

    This happens when there is no result returned by the API for a particular misspelling.

  • wasCorrectedTo: string

    The correction that was applied to the query. If no correction was applied, will default to an empty string.



The DidYouMean controller is responsible for handling query corrections. When a query returns no result but finds a possible query correction, the controller either suggests the correction or automatically triggers a new query with the suggested term.


  • engine: SearchEngine

    The headless engine.

  • props: DidYouMeanProps

    The configurable DidYouMean properties.

Returns DidYouMean


The configurable DidYouMean properties.




  • automaticallyCorrectQuery?: boolean

    Whether to automatically apply corrections for queries that would otherwise return no results. When automaticallyCorrectQuery is true, the controller automatically triggers a new query using the suggested term. When automaticallyCorrectQuery is false, the controller returns the suggested term without triggering a new query.

    The default value is true.

  • queryCorrectionMode?: 'legacy' | 'next'

    Define which query correction system to use

    legacy: Query correction is powered by the legacy index system. This system relies on an algorithm using solely the index content to compute the suggested terms. next: Query correction is powered by a machine learning system, requiring a valid query suggestion model configured in your Coveo environment to function properly. This system relies on machine learning algorithms to compute the suggested terms.

    Default value is legacy. In the next major version of Headless, the default value will be next.



  • correctedQuery: string

    The query once corrected

  • wordCorrections?: WordCorrection[]

    Array of correction for each word in the query


Call signatures

  • (): void;



  • correctedWord: string

    The new corrected word

  • length: number

    Length of the correction

  • offset: number

    Offset, from the beginning of the query

  • originalWord: string

    The original word that was corrected