This page is about version 1.0.8 of the app, which is not the most recent version. The latest stable version is 2.18.1.

Autocomplete is an alternative for the default VTEX autocomplete. It includes:

• Top Searches.
• Search History.
• Product Suggestions.
• Term Suggestions.

You can read a detailed explanation of Autocomplete and it's features here.

Add autocomplete-result-list.v2 into the blocks of a search-bar. We also recommend to set openAutocompleteOnFocus as shown.

Prop name	Type	Description	Default value
maxTopSearches	Number	Maximum number of terms in the top searches list	10
maxHistory	Number	Maximum number of terms in the search history list	5
maxSuggestedProducts	Number	Maximum number of suggested products	3
maxSuggestedTerms	Number	Maximum number of suggested terms	3
autocompleteWidth	Number	Autocomplete width. Number between 0 and 100	-
productLayout	ProductLayoutEnum	Defines the product layout in the suggested products list	-
hideTitles	Boolean	If true, all the titles will be hidden	false
historyFirst	Boolean	If true, the history list will be prioritized	false
customBreakpoints	CustomBreakpointsProp	Defines a maximum number of suggested products by breakpoints	-

ProductLayoutEnum

Enum name	Enum value
Horizontal	HORIZONTAL
Vertical	VERTICAL

CustomBreakpointsProp

Prop name	Type	Description	Default value
md	BreakpointProp	Defines the options for the md breakpoint	-
lg	BreakpointProp	Defines the options for the lg breakpoint	-
xlg	BreakpointProp	Defines the options for the xlg breakpoint	-

BreakpointProp

Prop name	Type	Description	Default value
width	Number	Minimum width for the breakpoint	-
maxSuggestedProducts	Number	Maximum number of suggested products for the breakpoint	-