Interface: SearchConfigInterface<T>

Type Parameters

Type Parameter
`T`

Properties

placeholderRenderer?

optional placeholderRenderer: string | HTMLElement

Placeholder text to display when the input field is empty.

Default

'Search...'

disabled?

optional disabled: boolean

Whether the search component is disabled.

Default

false

openListUpwards?

optional openListUpwards: boolean

Whether to open the suggestion list above the input field instead of below.

Default

false

onInput()?

optional onInput: (value, results, event) => void

Callback invoked when the input value changes. This callback should be used to process the query, retrieve matching items, and return them.

Parameters

Parameter	Type	Description
`value`	`string`	The current value of the input field
`results`	`T`[]	An array of found items of type T matching the current query
`event`	`InputEvent`	The input event object

Returns

void

debounceTime?

optional debounceTime: number

The debounce duration (in milliseconds) used to delay the onInput callback. Helps prevent excessive callback invocations during rapid typing.

Default

searchFn()?

optional searchFn: (query, limit?) => Promise<T[]>

Function that asynchronously retrieves suggestion items based on the search query. This function should process the query to find specific items in the data. The results are then returned to be used in onInput and onEnter callbacks.

Parameters

Parameter	Type	Description
`query`	`string`	The current search query
`limit?`	`number`	Optional. The maximum number of suggestion items to return

Returns

Promise<T[]>

A promise that resolves to an array of suggestion items of type T

suggestionsLimit?

optional suggestionsLimit: number

The maximum number of suggestions to retrieve and include in the results. When the number of suggestions exceeds this limit, the rest will be omitted. This can be tweaked to improve performance when dealing with large data sets.

Default

maxVisibleItems?

optional maxVisibleItems: number

The maximum items visible in the suggestions dropdown at once. When the number of suggestions exceeds this value, a scrollbar will be added.

Default

onSelect()?

optional onSelect: (suggestion) => void

Callback triggered when a suggestion from the autosuggest list is selected.

Parameters

Parameter	Type	Description
`suggestion`	`T`	The selected suggestion item of type T

Returns

void

suggestionRenderer()?

optional suggestionRenderer: (suggestion, value?) => string | HTMLElement

Customize how each suggestion is rendered.

Parameters

Parameter	Type	Description
`suggestion`	`T`	The suggestion item of type T to render
`value?`	`string`	-

Returns

string | HTMLElement

A string containing HTML or an HTMLElement representing the rendered suggestion

selectedSuggestionRenderer()?

optional selectedSuggestionRenderer: (suggestion, value?) => string

Function to convert a suggestion item to a string for display in the input field after selection.

Parameters

Parameter	Type	Description
`suggestion`	`T`	The suggestion item to convert
`value?`	`string`	The current value of the input field

Returns

string

The string representation of the suggestion

inputClassName?

optional inputClassName: string

Custom CSS class name to apply to the search input field.

Default

undefined

suggestionListClassName?

optional suggestionListClassName: string

Custom CSS class name to apply to the autosuggest list container.

Default

undefined

minSearchLength?

optional minSearchLength: number

The minimum number of characters required to trigger a search.

Default

onEnter()?

optional onEnter: (value, results) => void

Callback invoked when the return (Enter) key is pressed. This callback should process the current input value to find the matching items and return them.

Parameters

Parameter	Type	Description
`value`	`string`	The current value of the input field when Enter is pressed
`results`	`T`[]	An array of found items of type T matching the current query

Returns

void

highlightMatch?

optional highlightMatch: boolean

Whether to highlight the matching text in the suggestions.

Default

true

Upgrade from v1 CosmographBars