getTypeToSearch()

Prev Next

This function is used to create a type-to-search “session” which enables the user to start typing characters and get search results as they type.

For example, if a user is searching for “pants for men,” as they type “p” “pa” “pan” etc. they will get search results along the way without any extra actions.

// Import the integration from the 'installation' step
import { integration } from './xgenSdkIntegration';
const { getTypeToSearch } = integration;

getTypeToSearch(callback, options);

Params

Parameters passed to the getTypeToSearch function:

NAME/TYPE

DESCRIPTION

callback

function

The callback function that is called when there is a status update to type-to-search.

REQUIRED

options

TypeToSearchOptions

Options used to control the behavior of the type-to-search session.

Options

The getTypeToSearch() function accepts the following options:

NAME/TYPE

DESCRIPTION

REQUIRED

deploymentId

string

The deployment ID used for this search contains search engine settings and product filters, configurable within the platform.

debounnce
number

The debounce setting determines the delay in milliseconds before triggering the type-to-search API. For instance, with a debounce of 150 milliseconds, the system waits for this duration after a key press. If no additional key is pressed within that period, it initiates a type-to-search query. However, if another key is pressed before the 150 milliseconds elapse, the timer resets, and the system waits another 150 milliseconds to trigger the query. Setting the debounce to 0 effectively disables this delay.

Default: 150

responseTimeout

number

The amount of time (in milliseconds) that type-to-search will wait for the API to respond before cancelling it. If the type-to-search API takes longer than this amount of time, the API will be cancelled and no results will render for that query.

Default: disabled

input

HTMLInputElement

The HTML Input element that will be listened to for the user typing.

Response

The return value of the getTypeToSearch function is an object with properties and methods that can be used to control the type-to-search behavior.

// Start a type to search session
const tts = getTypeToSearch(console.log, { deploymentId: '3d8e3aa4-b1e9-4b1b-9ff6-ca4bc64806d0' });

NAME/TYPE

DESCRIPTION

context

Context

An object of methods used to control the context that can be passed for dynamic filtering.

search(query, options)
function

Used to trigger a type-to-search query. This query will still respect the debounce and response timeout settings as defined in the getTypeToSearch options.

Note: this function is called automatically on key press if bound to an input.

bindInput(input)

function

Used to bind an HTML Input element to the type-to-search object. Any character the users types within that element will fire the search method above on the set debounce.