THIS IS ARCHIVED DOCUMENTATION

(Deprecated) DidYouMean

Methods

applyCorrection

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

subscribe

Adds a callback that will be called on state change.

Parameters

  • listener: () ⇒ void

    A callback to be invoked on state change.

Returns Unsubscribe: An unsubscribe function to remove the listener.

Attributes

state

The state of the DidYouMean controller.

Properties

  • hasQueryCorrection: boolean

    Specifies if there’s a query correction to apply.

  • 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 mispelling.

  • wasCorrectedTo: string

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

Initialize

buildDidYouMean

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.

Parameters

  • engine: Engine<ConfigurationSection & DidYouMeanSection>

    The headless engine.

Returns DidYouMean

QueryCorrection

Properties

  • correctedQuery: string

    The query once corrected

  • wordCorrections: WordCorrection[]

    Array of correction for each word in the query

Unsubscribe

Call signatures

  • (): void

WordCorrection

Properties

  • 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

Example Implementation

did-you-mean.fn.tsx

import {useEffect, useState, FunctionComponent} from 'react';
import {DidYouMean as HeadlessDidYouMean} from '@coveo/headless';
 
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 (
      <div>
        <p>
          No results for{' '}
          <b>{state.queryCorrection.wordCorrections[0].originalWord}</b>
        </p>
        <p>
          Query was automatically corrected to <b>{state.wasCorrectedTo}</b>
        </p>
      </div>
    );
  }
 
  return (
    <button onClick={() => controller.applyCorrection()}>
      Did you mean: {state.queryCorrection.correctedQuery} ?
    </button>
  );
};
 
// usage
 
/**
 * ```tsx
 * const controller = buildDidYouMean(engine);
 *
 * <DidYouMean controller={controller} />;
 * ```
 */