Autocomplete

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.

{
  "autocomplete-result-list.v2": {
    "blocks": ["product-summary"]
  },
  "search-bar": {
    "blocks": ["autocomplete-result-list.v2"],
    "props": {
      "openAutocompleteOnFocus": true
    }
  }
}

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`
`customPage`	`string`	Defines a custom page to the autocomplete links. Example: `store.search.custom`	`store.search`
`orderBy`	`enum`	Decides which order products must follow when displayed. The possible values are named after the order type: `OrderByTopSaleDESC`, `OrderByReleaseDateDESC`, `OrderByBestDiscountDESC`, `OrderByPriceDESC`, `OrderByPriceASC`, `OrderByNameASC`, `OrderByNameDESC` or `OrderByScoreDESC` (relevance Score). `ASC` and `DESC` stand for ascending order and descending order, respectively.	`OrderByScoreDESC`

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	-