This page is about version 2.17.0 of the app, which is not the most recent version. The latest stable version is 2.18.1.
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.
Before you begin
Make sure you have added the search
app to your theme dependencies in the manifest.json
as shown below:
_10 "dependencies": {_10 "vtex.search": "2.x"_10 }
Check the Search app documentation for more details on this step.
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 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. | - |