THIS IS ARCHIVED DOCUMENTATION

(Deprecated) StandaloneSearchBox

The StandaloneSearchBox headless controller offers a high-level interface for designing a common search box UI controller. Meant to be used for a search box that will redirect instead of executing a query.

Methods

submit

Triggers a redirection.

clear

Clears the search box text and the suggestions.

hideSuggestions

Clears the suggestions.

selectSuggestion

Selects a suggestion and calls submit.

Parameters

  • value: string

    The string value of the suggestion to select

showSuggestions

Shows the suggestions for the current search box value.

updateText

Updates the search box text value and shows the suggestions for that value.

Parameters

  • value: string

    The string value to update the search box with.

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

A scoped and simplified part of the headless state that is relevant to the StandaloneSearchBox controller.

Properties

  • redirectTo: string | null

    The Url to redirect to.

  • isLoading: boolean

    Determines if a search is in progress.

  • suggestions: Suggestion[]

    The query suggestions for the search box query.

  • value: string

    The current query in the search box.

Initialize

buildStandaloneSearchBox

Creates a StandaloneSearchBox instance.

Parameters

  • engine: Engine<object>

    The headless engine.

  • props: StandaloneSearchBoxProps

    The configurable StandaloneSearchBox properties.

Returns StandaloneSearchBox

StandaloneSearchBoxProps

The configurable StandaloneSearchBox properties.

Properties

StandaloneSearchBoxOptions

Properties

  • redirectionUrl: string

    The default Url the user should be redirected to, when a query is submitted. If a query pipeline redirect is triggered, it will redirect to that Url instead.

  • enableQuerySyntax?: boolean

    Whether to interpret advanced query syntax in the query.

    Default: false

  • highlightOptions?: SuggestionHighlightingOptions

    Specifies delimiters to highlight parts of a query suggestion that e.g match, do not match the query.

  • id?: string

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

  • numberOfSuggestions?: number

    The number of query suggestions to request from Coveo ML (for example, 3).

    Using the value 0 disables the query suggest feature.

    Default: 5

Delimiters

Properties

  • close: string

    Closing delimiter

  • open: string

    Opening delimiter

Suggestion

Properties

  • highlightedValue: string

    The suggestion after applying any highlightOptions.

  • rawValue: string

    The suggestion text.

SuggestionHighlightingOptions

Properties

  • correctionDelimiters?: Delimiters

    Delimiters for substrings that are correction of the input

  • exactMatchDelimiters?: Delimiters

    Delimiters for substrings that are exact match of the input

  • notMatchDelimiters?: Delimiters

    Delimiters for substrings that do not match the input

Unsubscribe

Call signatures

  • (): void

Example Implementation

standalone-search-box.fn.tsx

import {useEffect, useState, FunctionComponent} from 'react';
import {StandaloneSearchBox as HeadlessStandaloneSearchBox} from '@coveo/headless';
 
interface StandaloneSearchBoxProps {
  controller: HeadlessStandaloneSearchBox;
}
 
export const StandaloneSearchBox: FunctionComponent<StandaloneSearchBoxProps> = (
  props
) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  function isEnterKey(e: React.KeyboardEvent<HTMLInputElement>) {
    return e.key === 'Enter';
  }
 
  if (!state) {
    return null;
  }
 
  if (state.redirectTo) {
    window.location.href = state.redirectTo;
    return null;
  }
 
  return (
    <div>
      <input
        value={state.value}
        onChange={(e) => controller.updateText(e.target.value)}
        onKeyDown={(e) => isEnterKey(e) && controller.submit()}
      />
      <ul>
        {state.suggestions.map((suggestion) => {
          const value = suggestion.rawValue;
          return (
            <li key={value} onClick={() => controller.selectSuggestion(value)}>
              {value}
            </li>
          );
        })}
      </ul>
    </div>
  );
};
 
// usage
 
/**
 * ```tsx
 * const controller = buildStandaloneSearchBox(engine, {
 *   options: {redirectionUrl: 'https://mywebsite.com/search'},
 * });
 *
 * <StandaloneSearchBox controller={controller} />;
 * ```
 */