This page is about version 3.174.0 of the app, which is not the most recent version. The latest stable version is 3.175.0.
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://user-images.githubusercontent.com/67270558/147763822-a47487e7-35d1-4d42-a30e-2b505209b5f2.gif"}}](https://user-images.githubusercontent.com/67270558/147763822-a47487e7-35d1-4d42-a30e-2b505209b5f2.gif)
Configuration
- Import the
vtex.store-components
app to your theme's dependencies in themanifest.json
file as in the following example:
_10 "dependencies": {_10 "vtex.store-components": "3.x"_10 }
- Add the
autocomplete-result-list
block into thesearch-bar
component. For example:
_10 "search-bar": {_10 "blocks": [_10+ "autocomplete-result-list"_10 ]_10 }
- Then, declare the
autocomplete-result-list
block using the props stated in the Props table.
Props
Info
The
autocomplete-result-list
block is commonly used with Downshift. Hence, some of its props are directly related to it.
Prop name | Type | Description | Default value |
---|---|---|---|
attemptPageTypeSearch | Boolean | Uses the input term to try to navigate to the proper page type (e.g. a department, a brand, a category) if true . | - |
classes | CustomCSSClasses | Overrides 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) | Function | Closes the menu. | - |
customSearchPageUrl | String | Template for a custom URL. It accepts a substring ${term} as placeholder to interpolate the searched term (e.g., /search?query=${term} ). | - |
data | Object | Graphql data response. | {} |
highlightedIndex (Downshift) | Number | The index that should be highlighted. | - |
getItemProps (Downshift) | Function | Returns the props for every menu item element being rendered. | - |
getMenuProps (Downshift) | Function | Returns the props for the ul or root element of your menu. | - |
inputValue | String | Search query. | - |
onClearInput | Function | Clears the input. | - |
isOpen | Boolean | Identifies 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 |