Quick Search Widget (JS)

import {
  const QuickSearchWidget: ({ container, ...props }: QuickSearchWidgetOptions) => null | undefined
Quick Search widget
@publicQuickSearchWidget,
  function addRecommIdQueryParam(url: string, recommId: string | undefined): string
Utility function to append `recombee_recomm_id` parameter to an url string.
For usage in widget template to construct item link URL.
@publicaddRecommIdQueryParam,
  
const DefaultInput: ((props: {
    state: QuickSearchWidgetState;
    inputProps?: {
        placeholder?: string;
    };
}) => React.JSX.Element) & {
    ...;
}DefaultInput,
  
const DefaultItem: ((props: {
    href?: string;
    image?: React.ReactNode;
    primaryContent?: React.ReactNode;
    secondaryContent?: React.ReactNode;
    highlightedContent?: React.ReactNode;
}) => React.JSX.Element) & {
    ...;
}DefaultItem,
  const ItemImage: React.FunctionComponent<ItemImageProps>
Item image component
@publicItemImage,
  function SearchIcon(): React.JSX.ElementSearchIcon,
  function CloseIcon(): React.JSX.ElementCloseIcon,
  const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml,
} from "@recombee/quick-search-widget-js";

import "@recombee/quick-search-widget-js/dist/styles.css";

function QuickSearchWidget({ container, ...props }: QuickSearchWidgetOptions): null | undefined
Quick Search widget
@publicQuickSearchWidget({
  container: string
CSS Selector to target the element where the widget should be inserted.
@publiccontainer: "#widget-root",
  WidgetConfigurationBase<CR extends (...args: any[]) => Request = CreateRequestFunction>.apiClient: ApiClient
Instance of Recombee JS API Client. See

{@link 
file://./#client-initialization Example
}
.
@publicapiClient: const apiClient: ApiClientapiClient,
  WidgetConfigurationBase<CR extends (...args: any[]) => Request = CreateRequestFunction>.createRequest: CreateRequestFunction
Request factory function. See

{@link 
file://./#client-initialization Quick Example
}
 or visit

{@link 
file:///api API Reference
}
 for overview of available requests.
@publiccreateRequest: const createRequest: CreateRequestFunctioncreateRequest,
  minSearchCharactersCount: number
Minimum length of search query for search request to be sent.
@publicminSearchCharactersCount: 3,
  desktopMediaQuery: string
CSS media query specifing when the widget should behave as displayed on
desktop. By default, widget behaves as mobile-first, filling entire
device screen with results dropdown.
@publicdesktopMediaQuery: "(min-width: 1000px)",

  type InputComponent: React.FC<InputProps>
Component responsible for rendering the widget input.
@publicInputComponent: (props: InputPropsprops) =>
    const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<form className="flex w-[400px] text-[#374040]">
      <${
const DefaultInput: ((props: {
    state: QuickSearchWidgetState;
    inputProps?: {
        placeholder?: string;
    };
}) => React.JSX.Element) & {
    ...;
}DefaultInput}
        state=${props: InputPropsprops.state: QuickSearchWidgetStatestate}
        inputProps=${{
          placeholder: stringplaceholder: `Search for "table"...`,
        }}
      />
    </form>`,

  type TriggerComponent: React.FC<TriggerProps>
Component responsible for rendering the widget trigger on mobile devices.
@publicTriggerComponent: (props: TriggerPropsprops) =>
    const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<button
      ...${props: TriggerPropsprops.state: QuickSearchWidgetStatestate.
QuickSearchWidgetState.triggerProps: {
    ref: (element: HTMLElement | null) => void;
    onClick: () => void;
}
Properties to be passed to the trigger button of a mobile widget.
@publictriggerProps}
      className="flex size-[38px] items-center justify-center rounded-sm bg-[#3bc4a1] text-white"
    >
      <${function SearchIcon(): React.JSX.ElementSearchIcon} />
    </button>`,

  type DropdownComponent: React.FC<DropdownProps>
Component responsible for rendering the widget dropdown.
@publicDropdownComponent: (props: DropdownPropsprops) =>
    const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<div
      className="mt-1 flex h-full max-h-full min-h-0 flex-col rounded-sm bg-white text-[#374040] shadow-2xl lg:h-auto lg:max-w-[900px] lg:min-w-[600px]"
    >
      ${!props: DropdownPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.isDesktop: boolean
Indicates that the widget is displayed on desktop device.
@publicisDesktop &&
      const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<form className="flex items-center gap-2 p-2">
        <div className="flex-grow">
          <${
const DefaultInput: ((props: {
    state: QuickSearchWidgetState;
    inputProps?: {
        placeholder?: string;
    };
}) => React.JSX.Element) & {
    ...;
}DefaultInput}
            state=${props: DropdownPropsprops.state: QuickSearchWidgetStatestate}
            inputProps=${{
              placeholder: stringplaceholder: `Search for "table"...`,
            }}
          />
        </div>
        <button
          ...${props: DropdownPropsprops.state: QuickSearchWidgetStatestate.
QuickSearchWidgetState.closeButtonProps: {
    type: "button";
    onClick: () => void;
    onTouchEnd: () => void;
}
Properties to be passed to the close button of a mobile dropdown.
@publiccloseButtonProps}
          className="flex size-[38px] items-center justify-center"
        >
          <${function CloseIcon(): React.JSX.ElementCloseIcon} />
        </button>
      </form>`}
      <div className="flex min-h-0 flex-grow flex-col">
        <div className="px-4 py-4 pb-2 text-sm font-semibold text-[#3f91ff]">
          Results
        </div>
        <div className="overflow-auto p-2">
          ${props: DropdownPropsprops.state: QuickSearchWidgetStatestate
            .
QuickSearchWidgetState.items: (index: number) => {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}[]
Getter for current results of the request batch. The `index` parameter
indicates an index of results in the Batch Request for which to return
items.
@publicitems(0)
            .
Array<{ key: string; id: string; recommId: string; values: { [key: string]: any; }; itemProps: { tabIndex: number; "data-search-result-id"?: string | undefined; onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void; }; }>.map<React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>(callbackfn: (value: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}, index: number, array: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}[]) => React.ReactElement<...>, thisArg?: any): React.ReactElement<...>[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map(
              (
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item) =>
                const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<${
const DefaultItem: ((props: {
    href?: string;
    image?: React.ReactNode;
    primaryContent?: React.ReactNode;
    secondaryContent?: React.ReactNode;
    highlightedContent?: React.ReactNode;
}) => React.JSX.Element) & {
    ...;
}DefaultItem}
                  key=${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.key: stringkey}
                  href=${function addRecommIdQueryParam(url: string, recommId: string | undefined): string
Utility function to append `recombee_recomm_id` parameter to an url string.
For usage in widget template to construct item link URL.
@publicaddRecommIdQueryParam(
                    `${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
values: {
    [key: string]: any;
}values?.__type[string]: anylink}`,
                    
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.recommId: stringrecommId,
                  )}
                  image=${const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<${const ItemImage: React.FunctionComponent<ItemImageProps>
Item image component
@publicItemImage}
                    className="size-16 overflow-hidden rounded-lg"
                    src=${`${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
values: {
    [key: string]: any;
}values?.__type[string]: anyimage}`}
                    width=${600}
                    height=${400}
                  />`}
                  primaryContent=${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
values: {
    [key: string]: any;
}values?.__type[string]: anyproduct_title}
                  secondaryContent=${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
values: {
    [key: string]: any;
}values?.__type[string]: anycategory_top}
                  highlightedContent=${`USD ${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
values: {
    [key: string]: any;
}values?.__type[string]: anyprice}`}
                  ...${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
itemProps: {
    tabIndex: number;
    "data-search-result-id"?: string | undefined;
    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
}itemProps}
                />`,
            )}
        </div>
      </div>
    </div>`,
});

import {
  const QuickSearchWidget: ({ container, ...props }: QuickSearchWidgetOptions) => null | undefined
Quick Search widget
@publicQuickSearchWidget,
  function addRecommIdQueryParam(url: string, recommId: string | undefined): string
Utility function to append `recombee_recomm_id` parameter to an url string.
For usage in widget template to construct item link URL.
@publicaddRecommIdQueryParam,
  
function DefaultSpinner(props: {
    className: string;
}): React.JSX.ElementDefaultSpinner,
  const ItemImage: React.FunctionComponent<ItemImageProps>
Item image component
@publicItemImage,
  function SearchIcon(): React.JSX.ElementSearchIcon,
  function CloseIcon(): React.JSX.ElementCloseIcon,
  const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml,
} from "@recombee/quick-search-widget-js";

import "@recombee/quick-search-widget-js/dist/styles.css";

function QuickSearchWidget({ container, ...props }: QuickSearchWidgetOptions): null | undefined
Quick Search widget
@publicQuickSearchWidget({
  container: string
CSS Selector to target the element where the widget should be inserted.
@publiccontainer: "#widget-root",
  WidgetConfigurationBase<CR extends (...args: any[]) => Request = CreateRequestFunction>.apiClient: ApiClient
Instance of Recombee JS API Client. See

{@link 
file://./#client-initialization Example
}
.
@publicapiClient: const apiClient: ApiClientapiClient,
  WidgetConfigurationBase<CR extends (...args: any[]) => Request = CreateRequestFunction>.createRequest: CreateRequestFunction
Request factory function. See

{@link 
file://./#client-initialization Quick Example
}
 or visit

{@link 
file:///api API Reference
}
 for overview of available requests.
@publiccreateRequest: const createRequest: CreateRequestFunctioncreateRequest,
  minSearchCharactersCount: number
Minimum length of search query for search request to be sent.
@publicminSearchCharactersCount: 3,
  typingDebounceDuration?: number | undefined
Maximum duration between keystrokes in milliseconds before search request
is made.
@publictypingDebounceDuration: 1000,
  desktopMediaQuery: string
CSS media query specifing when the widget should behave as displayed on
desktop. By default, widget behaves as mobile-first, filling entire
device screen with results dropdown.
@publicdesktopMediaQuery: "(min-width: 1000px)",
  type InputComponent: React.FC<InputProps>
Component responsible for rendering the widget input.
@publicInputComponent: (props: InputPropsprops) =>
    const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<form
      method="GET"
      action="https://example.com/search"
      target="_blank"
      className="flex w-[400px] gap-2 text-[#374040]"
    >
      <div
        className="relative flex flex-grow overflow-hidden rounded-lg border border-[#d9dbdb]"
      >
        <div
          className="flex size-[38px] items-center justify-center text-[#737979]"
        >
          <${function SearchIcon(): React.JSX.ElementSearchIcon} />
        </div>
        <input
          name="q"
          type="text"
          className="block w-full outline-hidden"
          placeholder=${`Search for "table"...`}
          ...${props: InputPropsprops.state: QuickSearchWidgetStatestate.
QuickSearchWidgetState.inputProps: {
    value: string;
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    onClick: () => void;
    ref: (element: HTMLElement | null) => void;
}
Properties to be passed to a input component.
@publicinputProps}
        />${props: InputPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.isLoading: boolean
Boolean flag indicating that a request for new results is in flight.
@publicisLoading &&
        const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<${
function DefaultSpinner(props: {
    className: string;
}): React.JSX.ElementDefaultSpinner}
          className="rb:absolute rb:top-2.25 rb:right-2.25 rb:h-5 rb:w-5"
        />`}
      </div>
      <button
        type="submit"
        className="rounded-lg bg-[#3f91ff] px-5 py-2.5 text-sm font-medium text-white focus:ring-4 focus:ring-blue-300 focus:outline-hidden"
      >
        Search
      </button>
    </form>`,
  type TriggerComponent: React.FC<TriggerProps>
Component responsible for rendering the widget trigger on mobile devices.
@publicTriggerComponent: (props: TriggerPropsprops) =>
    const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<button
      ...${props: TriggerPropsprops.state: QuickSearchWidgetStatestate.
QuickSearchWidgetState.triggerProps: {
    ref: (element: HTMLElement | null) => void;
    onClick: () => void;
}
Properties to be passed to the trigger button of a mobile widget.
@publictriggerProps}
      className="flex size-[38px] items-center justify-center rounded-sm bg-[#3bc4a1] text-white"
    >
      <${function SearchIcon(): React.JSX.ElementSearchIcon} />
    </button>`,

  type DropdownComponent: React.FC<DropdownProps>
Component responsible for rendering the widget dropdown.
@publicDropdownComponent: (props: DropdownPropsprops) =>
    const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<div
      className="mt-1 flex h-full max-h-full min-h-0 flex-col rounded-sm bg-white text-[#374040] shadow-2xl lg:h-auto lg:max-w-[900px] lg:min-w-[600px]"
    >
      ${!props: DropdownPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.isDesktop: boolean
Indicates that the widget is displayed on desktop device.
@publicisDesktop &&
      const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<form className="flex items-center gap-2 p-2">
        <div className="flex-grow">
          <div
            className="relative flex flex-grow overflow-hidden rounded-lg border border-[#d9dbdb]"
          >
            <div
              className="flex size-[42px] items-center justify-center text-[#737979]"
            >
              <${function SearchIcon(): React.JSX.ElementSearchIcon} />
            </div>
            <input
              type="text"
              className="block w-full outline-hidden"
              placeholder="Search in docs..."
              ...${props: DropdownPropsprops.state: QuickSearchWidgetStatestate.
QuickSearchWidgetState.inputProps: {
    value: string;
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    onClick: () => void;
    ref: (element: HTMLElement | null) => void;
}
Properties to be passed to a input component.
@publicinputProps}
            />${props: DropdownPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.isLoading: boolean
Boolean flag indicating that a request for new results is in flight.
@publicisLoading &&
            const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<div
              className="absolute top-2.5 right-2.5 h-5 w-5 animate-spin rounded-full border-2 border-dashed border-current text-[#d9dbdb] [--animate-spin:spin_3s_linear_infinite]"
            />`}
          </div>
        </div>
        <button
          ...${props: DropdownPropsprops.state: QuickSearchWidgetStatestate.
QuickSearchWidgetState.closeButtonProps: {
    type: "button";
    onClick: () => void;
    onTouchEnd: () => void;
}
Properties to be passed to the close button of a mobile dropdown.
@publiccloseButtonProps}
          className="flex size-[38px] items-center justify-center"
        >
          <${function CloseIcon(): React.JSX.ElementCloseIcon} />
        </button>
      </form>`}
      <div className="flex min-h-0 flex-grow flex-col">
        <div className="px-4 py-4 pb-2 text-sm font-semibold text-[#3f91ff]">
          Results
        </div>
        <div className="overflow-auto p-2">
          ${props: DropdownPropsprops.state: QuickSearchWidgetStatestate.
QuickSearchWidgetState.items: (index: number) => {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}[]
Getter for current results of the request batch. The `index` parameter
indicates an index of results in the Batch Request for which to return
items.
@publicitems(0).
Array<{ key: string; id: string; recommId: string; values: { [key: string]: any; }; itemProps: { tabIndex: number; "data-search-result-id"?: string | undefined; onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void; }; }>.map<React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>(callbackfn: (value: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}, index: number, array: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}[]) => React.ReactElement<...>, thisArg?: any): React.ReactElement<...>[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map(
            (
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item) =>
              const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<a
                key=${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.key: stringkey}
                href=${function addRecommIdQueryParam(url: string, recommId: string | undefined): string
Utility function to append `recombee_recomm_id` parameter to an url string.
For usage in widget template to construct item link URL.
@publicaddRecommIdQueryParam(
                  `${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
values: {
    [key: string]: any;
}values?.__type[string]: anylink}`,
                  
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.recommId: stringrecommId,
                )}
                ...${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
itemProps: {
    tabIndex: number;
    "data-search-result-id"?: string | undefined;
    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
}itemProps}
                className="flex items-center gap-4 rounded-sm p-2 outline-hidden hover:bg-[#f7f7f7] focus:bg-[#f7f7f7]"
                ><div>
                  <${const ItemImage: React.FunctionComponent<ItemImageProps>
Item image component
@publicItemImage}
                    className="size-16 overflow-hidden rounded-lg"
                    src=${`${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
values: {
    [key: string]: any;
}values?.__type[string]: anyimage}`}
                    width=${600}
                    height=${400}
                  />
                </div>
                <div className="rb:flex-grow">
                  <div
                    className="rb:font-semibold rb:text-nowrap rb:text-ellipsis rb:overflow-hidden"
                  >
                    ${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
values: {
    [key: string]: any;
}values?.__type[string]: anyproduct_title}
                  </div>
                  <div
                    className="rb:text-[#737979] rb:text-nowrap rb:text-ellipsis rb:overflow-hidden"
                  >
                    ${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
values: {
    [key: string]: any;
}values?.__type[string]: anycategory}
                  </div>
                </div>
                <div
                  className="rb:font-bold rb:text-[#3f91ff] rb:text-nowrap rb:text-ellipsis rb:overflow-hidden"
                >
                  ${`USD ${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
values: {
    [key: string]: any;
}values?.__type[string]: anyprice}`}
                </div></a
              >`,
          )}
        </div>
      </div>
    </div>`,
});

import {
  const QuickSearchWidget: ({ container, ...props }: QuickSearchWidgetOptions) => null | undefined
Quick Search widget
@publicQuickSearchWidget,
  function addRecommIdQueryParam(url: string, recommId: string | undefined): string
Utility function to append `recombee_recomm_id` parameter to an url string.
For usage in widget template to construct item link URL.
@publicaddRecommIdQueryParam,
  
const DefaultInput: ((props: {
    state: QuickSearchWidgetState;
    inputProps?: {
        placeholder?: string;
    };
}) => React.JSX.Element) & {
    ...;
}DefaultInput,
  
const DefaultItem: ((props: {
    href?: string;
    image?: React.ReactNode;
    primaryContent?: React.ReactNode;
    secondaryContent?: React.ReactNode;
    highlightedContent?: React.ReactNode;
}) => React.JSX.Element) & {
    ...;
}DefaultItem,
  const ItemImage: React.FunctionComponent<ItemImageProps>
Item image component
@publicItemImage,
  function SearchIcon(): React.JSX.ElementSearchIcon,
  function CloseIcon(): React.JSX.ElementCloseIcon,
  const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml,
} from "@recombee/quick-search-widget-js";

import "@recombee/quick-search-widget-js/dist/styles.css";

const const createRequest: CreateRequestFunctioncreateRequest: 
type CreateRequestFunction = (options: {
    searchQuery: string;
    isFullScreen?: boolean;
}) => RequestCreateRequestFunction = ({ searchQuery: stringsearchQuery }) => {
  return new 
new Batch(requests: Request[], optional?: {
    distinctRecomms?: boolean;
}): Batch
@paramrequests - Array containing the requests.@paramoptional - Optional parameters given as an object (allowed parameters: distinctRecomms).Batch(
    [
      new 
new SearchItems(userId: string, searchQuery: string, count: number, optional?: {
    scenario?: string;
    cascadeCreate?: boolean;
    returnProperties?: boolean;
    includedProperties?: string[];
    filter?: string;
    booster?: string;
    logic?: string | object;
    expertSettings?: {
        [key: string]: unknown;
    };
    returnAbGroup?: boolean;
}): SearchItems
@paramuserId - ID of the user for whom personalized search will be performed.@paramsearchQuery - Search query provided by the user. It is used for the full-text search.@paramcount - Number of items to be returned (N for the top-N results).@paramoptional - Optional parameters given as an object.SearchItems("userId", searchQuery: stringsearchQuery, 5, {
        scenario?: string | undefined
Scenario defines a particular search field in your user interface.scenario: "search",
        cascadeCreate?: boolean | undefined
If the user does not exist in the database, returns a list of non-personalized search results and creates the user in the database. This allows, for example, rotations in the following recommendations for that user, as the user will be already known to the system.cascadeCreate: true,
        returnProperties?: boolean | undefined
With `returnProperties=true`, property values of the recommended items are returned along with their IDs in a JSON dictionary. The acquired property values can be used to easily display the recommended items to the user.returnProperties: true,
      }),
      new 
new SearchItemSegments(userId: string, searchQuery: string, count: number, optional?: {
    scenario?: string;
    cascadeCreate?: boolean;
    filter?: string;
    booster?: string;
    logic?: string | object;
    expertSettings?: {
        [key: string]: unknown;
    };
    returnAbGroup?: boolean;
}): SearchItemSegments
@paramuserId - ID of the user for whom personalized search will be performed.@paramsearchQuery - Search query provided by the user. It is used for the full-text search.@paramcount - Number of segments to be returned (N for the top-N results).@paramoptional - Optional parameters given as an object.SearchItemSegments("userId", searchQuery: stringsearchQuery, 5, {
        scenario?: string | undefined
Scenario defines a particular application of recommendations. It can be, for example, "homepage", "cart", or "emailing".scenario: "search-brands",
        cascadeCreate?: boolean | undefined
If the user does not exist in the database, returns a list of non-personalized recommendations and creates the user in the database. This allows, for example, rotations in the following recommendations for that user, as the user will be already known to the system.cascadeCreate: true,
      }),
    ],
    {
      distinctRecomms?: boolean | undefineddistinctRecomms: true,
    },
  );
};

function QuickSearchWidget({ container, ...props }: QuickSearchWidgetOptions): null | undefined
Quick Search widget
@publicQuickSearchWidget({
  container: string
CSS Selector to target the element where the widget should be inserted.
@publiccontainer: "#widget-root",
  WidgetConfigurationBase<CR extends (...args: any[]) => Request = CreateRequestFunction>.apiClient: ApiClient
Instance of Recombee JS API Client. See

{@link 
file://./#client-initialization Example
}
.
@publicapiClient: const apiClient: ApiClientapiClient,
  WidgetConfigurationBase<CR extends (...args: any[]) => Request = CreateRequestFunction>.createRequest: CreateRequestFunction
Request factory function. See

{@link 
file://./#client-initialization Quick Example
}
 or visit

{@link 
file:///api API Reference
}
 for overview of available requests.
@publiccreateRequest: const createRequest: CreateRequestFunctioncreateRequest,
  minSearchCharactersCount: number
Minimum length of search query for search request to be sent.
@publicminSearchCharactersCount: 3,
  primaryResultsIndex?: number | undefined
Index of request in a batch from which the results are considered to be
navigable by arrow keys.
@publicprimaryResultsIndex: 0,
  desktopMediaQuery: string
CSS media query specifing when the widget should behave as displayed on
desktop. By default, widget behaves as mobile-first, filling entire
device screen with results dropdown.
@publicdesktopMediaQuery: "(min-width: 1000px)",

  type InputComponent: React.FC<InputProps>
Component responsible for rendering the widget input.
@publicInputComponent: (props: InputPropsprops) =>
    const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<form className="flex w-[400px] text-[#374040]">
      <${
const DefaultInput: ((props: {
    state: QuickSearchWidgetState;
    inputProps?: {
        placeholder?: string;
    };
}) => React.JSX.Element) & {
    ...;
}DefaultInput}
        state=${props: InputPropsprops.state: QuickSearchWidgetStatestate}
        inputProps=${{
          placeholder: stringplaceholder: `Search for "table"...`,
        }}
      />
    </form>`,

  type TriggerComponent: React.FC<TriggerProps>
Component responsible for rendering the widget trigger on mobile devices.
@publicTriggerComponent: (props: TriggerPropsprops) =>
    const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<button
      ...${props: TriggerPropsprops.state: QuickSearchWidgetStatestate.
QuickSearchWidgetState.triggerProps: {
    ref: (element: HTMLElement | null) => void;
    onClick: () => void;
}
Properties to be passed to the trigger button of a mobile widget.
@publictriggerProps}
      className="flex size-[38px] items-center justify-center rounded-sm bg-[#3bc4a1] text-white"
    >
      <${function SearchIcon(): React.JSX.ElementSearchIcon} />
    </button>`,

  type DropdownComponent: React.FC<DropdownProps>
Component responsible for rendering the widget dropdown.
@publicDropdownComponent: (props: DropdownPropsprops) =>
    const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<div
      className="mt-1 flex h-full max-h-full min-h-0 flex-col rounded-sm bg-white text-[#374040] shadow-2xl lg:h-auto lg:max-w-[900px] lg:min-w-[600px]"
    >
      ${!props: DropdownPropsprops.state: QuickSearchWidgetStatestate.QuickSearchWidgetState.isDesktop: boolean
Indicates that the widget is displayed on desktop device.
@publicisDesktop &&
      const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<form className="flex items-center gap-2 p-2">
        <div className="flex-grow">
          <${
const DefaultInput: ((props: {
    state: QuickSearchWidgetState;
    inputProps?: {
        placeholder?: string;
    };
}) => React.JSX.Element) & {
    ...;
}DefaultInput}
            state=${props: DropdownPropsprops.state: QuickSearchWidgetStatestate}
            inputProps=${{
              placeholder: stringplaceholder: `Search for "table"...`,
            }}
          />
        </div>
        <button
          ...${props: DropdownPropsprops.state: QuickSearchWidgetStatestate.
QuickSearchWidgetState.closeButtonProps: {
    type: "button";
    onClick: () => void;
    onTouchEnd: () => void;
}
Properties to be passed to the close button of a mobile dropdown.
@publiccloseButtonProps}
          className="flex size-[38px] items-center justify-center"
        >
          <${function CloseIcon(): React.JSX.ElementCloseIcon} />
        </button>
      </form>`}
      <div className="flex">
        <div className="flex min-h-0 flex-col">
          <div className="px-4 py-4 pb-2 text-sm font-semibold text-[#3f91ff]">
            Segments
          </div>
          <div className="overflow-auto p-2">
            ${props: DropdownPropsprops.state: QuickSearchWidgetStatestate.
QuickSearchWidgetState.items: (index: number) => {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}[]
Getter for current results of the request batch. The `index` parameter
indicates an index of results in the Batch Request for which to return
items.
@publicitems(1).
Array<{ key: string; id: string; recommId: string; values: { [key: string]: any; }; itemProps: { tabIndex: number; "data-search-result-id"?: string | undefined; onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void; }; }>.map<React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>(callbackfn: (value: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}, index: number, array: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}[]) => React.ReactElement<...>, thisArg?: any): React.ReactElement<...>[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map(
              (
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item) =>
                const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<a
                  key=${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.key: stringkey}
                  href=${function addRecommIdQueryParam(url: string, recommId: string | undefined): string
Utility function to append `recombee_recomm_id` parameter to an url string.
For usage in widget template to construct item link URL.
@publicaddRecommIdQueryParam(
                    `${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
values: {
    [key: string]: any;
}values?.__type[string]: anylink}`,
                    
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.recommId: stringrecommId,
                  )}
                  ...${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
itemProps: {
    tabIndex: number;
    "data-search-result-id"?: string | undefined;
    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
}itemProps}
                  className="flex items-center gap-2 rounded-sm p-2 text-nowrap outline-hidden hover:bg-[#f7f7f7] focus:bg-[#f7f7f7]"
                  ><div className="flex-grow">
                    <div className="font-semibold">${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.id: stringid}</div>
                  </div></a
                >`,
            )}
          </div>
        </div>
        <div className="flex min-h-0 flex-grow flex-col">
          <div className="px-4 py-4 pb-2 text-sm font-semibold text-[#3f91ff]">
            Results
          </div>
          <div className="overflow-auto p-2">
            ${props: DropdownPropsprops.state: QuickSearchWidgetStatestate
              .
QuickSearchWidgetState.items: (index: number) => {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}[]
Getter for current results of the request batch. The `index` parameter
indicates an index of results in the Batch Request for which to return
items.
@publicitems(0)
              .
Array<{ key: string; id: string; recommId: string; values: { [key: string]: any; }; itemProps: { tabIndex: number; "data-search-result-id"?: string | undefined; onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void; }; }>.map<React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>(callbackfn: (value: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}, index: number, array: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}[]) => React.ReactElement<...>, thisArg?: any): React.ReactElement<...>[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map(
                (
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item) =>
                  const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<${
const DefaultItem: ((props: {
    href?: string;
    image?: React.ReactNode;
    primaryContent?: React.ReactNode;
    secondaryContent?: React.ReactNode;
    highlightedContent?: React.ReactNode;
}) => React.JSX.Element) & {
    ...;
}DefaultItem}
                    key=${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.key: stringkey}
                    href=${function addRecommIdQueryParam(url: string, recommId: string | undefined): string
Utility function to append `recombee_recomm_id` parameter to an url string.
For usage in widget template to construct item link URL.
@publicaddRecommIdQueryParam(
                      `${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
values: {
    [key: string]: any;
}values?.__type[string]: anylink}`,
                      
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.recommId: stringrecommId,
                    )}
                    image=${const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElementhtml`<${const ItemImage: React.FunctionComponent<ItemImageProps>
Item image component
@publicItemImage}
                      className="size-16 overflow-hidden rounded-lg"
                      src=${`${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
values: {
    [key: string]: any;
}values?.__type[string]: anyimage}`}
                      width=${600}
                      height=${400}
                    />`}
                    primaryContent=${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
values: {
    [key: string]: any;
}values?.__type[string]: anyproduct_title}
                    secondaryContent=${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
values: {
    [key: string]: any;
}values?.__type[string]: anycategory_top}
                    highlightedContent=${`USD ${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
values: {
    [key: string]: any;
}values?.__type[string]: anyprice}`}
                    ...${
item: {
    key: string;
    id: string;
    recommId: string;
    values: {
        [key: string]: any;
    };
    itemProps: {
        tabIndex: number;
        "data-search-result-id"?: string | undefined;
        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
    };
}item.
itemProps: {
    tabIndex: number;
    "data-search-result-id"?: string | undefined;
    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLAnchorElement | HTMLDivElement>) => void;
}itemProps}
                  />`,
              )}
          </div>
        </div>
      </div>
    </div>`,
});