This page is about version 2.4.0 of the app, which is not the most recent version. The latest stable version is 2.17.0.
Description
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.
Usage
Add autocomplete-result-list.v2 into the blocks of a search-bar. We also recommend to set openAutocompleteOnFocus as shown.
_11{_11 "autocomplete-result-list.v2": {_11 "blocks": ["product-summary"]_11 },_11 "search-bar": {_11 "blocks": ["autocomplete-result-list.v2"],_11 "props": {_11 "openAutocompleteOnFocus": true_11 }_11 }_11}
Props
| 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 | - |
__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 |
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 | - |