Documentation
Feedback
Guides

Autocomplete Result List

The autocomplete-result-list component displays the autocomplete functionality in the search bar. This component serves mainly to ease the creation of custom autocomplete components for search engines.

{"base64":"  ","img":{"width":1870,"height":767,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":2137387,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-autocompleteresults-0.gif"}}

Configuration

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

_10
"dependencies": {
_10
"vtex.store-components": "3.x"
_10
}

  1. Add the autocomplete-result-list block into the search-bar component. For example:

_10
"search-bar": {
_10
"blocks": [
_10
+ "autocomplete-result-list"
_10
]
_10
}

  1. Then, declare the autocomplete-result-list block using the props stated in the Props table.

Props

The autocomplete-result-list block is commonly used with Downshift. Hence, some of its props are directly related to it.

Prop nameTypeDescriptionDefault value
attemptPageTypeSearchBooleanUses the input term to try to navigate to the proper page type (e.g. a department, a brand, a category) if true.-
classesCustomCSSClassesOverrides default CSS handles. To better understand how this prop works, check this document. Note that this is only helpful if you're using this block as a React component.undefined
closeMenu (Downshift)FunctionCloses the menu.-
customSearchPageUrlStringTemplate for a custom URL. It accepts a substring ${term} as placeholder to interpolate the searched term (e.g., /search?query=${term}).-
dataObjectGraphql data response.{}
highlightedIndex (Downshift)NumberThe index that should be highlighted.-
getItemProps (Downshift)FunctionReturns the props for every menu item element being rendered.-
getMenuProps (Downshift)FunctionReturns the props for the ul or root element of your menu.-
inputValueStringSearch query.-
onClearInputFunctionClears the input.-
isOpenBooleanIdentifies if the autocomplete should be opened.-

Customization

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
resultsItem
resultsItemImage
resultsItemName
resultsList
searchTerm
spinnerContainer
spinnerInnerContainer
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page