The Input component treats redirects as case-insensitive, meaning the user-inputted value Computer returns the redirect for the query computer and vice versa.
The component does not support the handling of multiple redirects for queries of the same word with varied letter casing. For example, if you have created redirects for each of the queries computer, Computer, and COMPUTER, only one of them is used (dependent upon your browser).
By default <Input /> has an additional mode "instant" and it is also the default value (search on change). To disable it, simple change mode to "standard".
If you have an existing input and don't want Input to render another extra input of its own then you can pass in the inputElement prop, this way it will not render its own input and instead will apply all attributes and handlers to the element that you just passed in.
The mode of the combobox. 'standard' will operate as a normal text input. 'typeahead' will provide an inline completion suggestion. 'suggestions' will provide an autocomplete menu with options to select. 'results' will perform a full search using the provided term and render full results.
maxSuggestions
number
Sets how many autocomplete suggestions are shown in the box below the search input.
retainFilters
boolean
false
Keep filters when a user performs a new search.
minimumCharacters
number
0
Minimum characters needed to perform a search request.
disableRedirects
boolean
false
Search inptus will navigate to the any configured redirects when the customer submits a matching query. disableRedirects forces the input to perform a standard search instead. This is true by default for results and instant modes to prevent customers from being unexpectedly swept away from the page.
It also composes the Combobox component a subset of the following props are also valid:
Name
Type
Default
Description
placeholder
string
'Search'
The placeholder of the input.
onChange
(value: string) => void
The callback when the input value changes. Note: The event is not passed as the argument.
onSelect
(value: T) => void
The callback when an item is selected.
inputElement
{ current: HTMLInputElement }
Input element to render the combobox in attach mode.
portalContainer
document.body
The portal container which will be the container for the combobox's dropdown.