Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Basic components
Autocomplete
vtex.search
Version: 2.16.10
Latest version: 2.16.10

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 nameTypeDescriptionDefault value
maxTopSearchesNumberMaximum number of terms in the top searches list.10
maxHistoryNumberMaximum number of terms in the search history list.5
maxSuggestedProductsNumberMaximum number of suggested products.3
maxSuggestedTermsNumberMaximum number of suggested terms.3
autocompleteWidthNumberAutocomplete width. Number between 0 and 100.-
productLayoutProductLayoutEnumDefines the product layout in the suggested products list.-
hideTitlesBooleanIf true, all the titles will be hidden.false
historyFirstBooleanIf true, the Search History list will be prioritized.false
customBreakpointsCustomBreakpointsPropDefines a maximum number of suggested products by breakpoints.-
__unstableProductOriginVtexBooleanYou 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
customPagestringDefines a custom page to the autocomplete links. Example: store.search.custom.store.search
orderByenumDetermines 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 nameEnum value
HorizontalHORIZONTAL
VerticalVERTICAL

CustomBreakpointsProp

Prop nameTypeDescriptionDefault value
mdBreakpointPropDefines the options for the md breakpoint.-
lgBreakpointPropDefines the options for the lg breakpoint.-
xlgBreakpointPropDefines the options for the xlg breakpoint.-

BreakpointProp

Prop nameTypeDescriptionDefault value
widthNumberMinimum width for the breakpoint.-
maxSuggestedProductsNumberMaximum number of suggested products for the breakpoint.-
See also
Vtex.search
VTEX IO Apps
VTEX App Store
VTEX IO Apps