Autocomplete is the Intelligent Search feature that displays previous search results based on current and previous searches. These results are presented in four different lists, which can be together or separated, depending on the customer's interaction. It includes:

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

During the interaction with the search bar, Intelligent Search immediately displays the set of Top Searches and Search History (if the customer has done searches before).

When the user starts typing, the system displays the Search suggestions and the Product suggestions and removes the previous lists.

You can read a detailed explanation of Autocomplete and its features in the Autocomplete user guide.

Make sure you have added the search app to your theme dependencies in the manifest.json as shown below:

Check the Search app documentation for more details on this step.

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 Search History list will be prioritized.	false
customBreakpoints	CustomBreakpointsProp	Defines a maximum number of suggested products by breakpoints.	-
__unstableProductOriginVtex	Boolean	You can use this property as true if any of your product-summary props come with a null value. This is because some product information does not come by default in the Search.	false
simulationBehavior	"skip" or "default"	If you want faster searches and do not care about most up to date prices and promotions, use "skip" value.	default
customPage	string	Defines a custom page to the autocomplete links. Example: store.search.custom.	store.search
orderBy	enum	Determines which order products must follow when displayed. The possible values are named after the order type: OrderByTopSaleDESC, OrderByReleaseDateDESC, OrderByBestDiscountDESC, OrderByPriceDESC, OrderByPriceASC, OrderByNameASC, or OrderByNameDESC. ASC and DESC stand for ascending order and descending order, respectively, based on the position of each value's corresponding code in the ASCII table. If not set to any of the mentioned values, the fallback behavior is sorting by relevance settings. OrderByScoreDESC is not a valid value for this prop.	""

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.	-