Step 3: Configuring the Search Bar

The last step is to configure the <SearchBar /> using what you’ve added to your component in steps 1 and 2.

The <SearchBar /> has an optional prop called visualAutocompleteConfig that takes a VisualAutocompleteConfig object. This object contains a series of required and optional fields:

entityPreviewSearcher → As described in step 1, a SearchHeadless instance used to perform the visual autocomplete searches.
renderEntityPreviews → As described in step 2, a function that maps results to entity previews.
restrictVerticals → Which verticals are included in the call to renderEntityPreviews
universalLimit (optional) → How many results per vertical to include in the call to renderEntityPreviews .
entityPreviewsDebouncingTime (optional) → Debouncing time in milliseconds for making API requests for the entity previews. Defaults to 500 milliseconds.

Below is an example of configuring the <SearchBar /> to include the visualAutocompleteConfig prop:

<SearchBar
  visualAutocompleteConfig={{
    entityPreviewSearcher: entityPreviewSearcher,
    includedVerticals: ["products"],
    renderEntityPreviews: renderEntityPreviews,
    universalLimit: { products: 4 },
    entityPreviewsDebouncingTime: 300,
  }}
/>

<% elem.innerText %>