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

autocomplete-result-list is a VTEX Component that represents the autocomplete from the search bar. This components serves mostly to ease the creation of custom autocomplete components by search engines.

1. Import the vtex.store-components app to your theme's dependencies in the manifest.json, for example:

2. Add the autocomplete-result-list block into the search-bar blocks, for example:

This autocomplete is commonly used with Downshift. Some of its props are directly related to it.

Prop name	Type	Description	Default value
data	Object	Graphql data response	{}
inputValue	String	Search query	-
onClearInput	Function	Clears the input	-
getItemProps (Downshift)	Function	Returns the props you should apply to any menu item elements you render	-
closeMenu (Downshift)	Function	closes the menu	-
highlightedIndex (Downshift)	Number	The index that should be highlighted	-
getMenuProps (Downshift)	Function	returns the props you should apply to the ul element (or root of your menu) that you render	-
customSearchPageUrl	String	Template for a custom url. It can have a substring ${term} used as placeholder to interpolate the searched term. (e.g. /search?query=${term})	-
isOpen	Boolean	Identify if autocomplete should be open	-
attemptPageTypeSearch	Boolean	if true, uses the term the user has inputted to try to navigate to the proper page type (e.g. a department, a brand, a category)	-
classes	CustomCSSClasses	Used to override default CSS handles. To better understand how this prop works, we recommend reading about it here. Note that this is only useful if you're using this block as a React component.	undefined

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
resultsItem
resultsList
searchTerm
resultsItemImage
spinnerContainer
spinnerInnerContainer
resultsItemName