<% user.full_name %>
<% util.level ? util.level.title : '' %>
Explorer Pioneer Apollo Viking Voyager Pathfinder Orion
Points
<% user.points ? user.points.toLocaleString() : 0 %>
Badges
<% util.badgeCount %>
Streaks
Congratulations You've <% util.newestBadge.isCurriculum ? 'completed' : 'earned' %> the
<% util.newestBadge.title %> <% util.newestBadge.isCurriculum ? 'curriculum' : 'badge' %>!
previous
next
Share to Social Media
Linked In Facebook
Status
<% util.level ? util.level.title : '' %>
<% util.level ? util.level.points : '' %>
<% util.nextLevel ? util.nextLevel.title : '' %>
<% util.nextLevel ? util.nextLevel.points : '' %>
Level up! <% util.levelPointsRemaining %> points to go
Level up! <% util.levelPointsRemaining %> points to go
Badges
Completed Hitchhikers Track Completed Content Track Completed Pages Track Completed Page Builder Track Completed Search Backend Track Completed Search Frontend Theme Track Completed Search UI React Track Completed Solution Templates and the Admin Console Track Completed Technical Skills Track Completed Platform Basics Track Completed Listings Track Completed Reviews Track Completed Industry Overview Track Completed Analytics Track Completed Industry Overview & Product Basics Track Completed Multi-Language Experiences Track Completed Chat Track
<% util.expandBadges ? 'Less' : 'More' %>
Playground Accounts
New +
No Playground Accounts
Create Playground +
View Profile
Log Out loading
Mission Complete! 🚀
Congratulations, you’ve completed your first module!

We hope you enjoy exploring the rest of the site. Please don’t forget to leave us feedback - we are constantly looking to improve. Happy Hitchhiking!
Home
Welcome to Hitchhikers! 👋
To learn more about the platform we encourage you to get started by completing the Hitchhikers Program Track and earning your first badge!
Start Here
Close notification
Guide
Configuring Visual Autocomplete for the Search Bar
Arrow Back
Completed
Introduction
Introduction
completed
Completed 1
Step 1
Fetch a New SearchHeadless Instance
completed
Completed 2
Step 2
Write a renderEntityPreviews Function
completed
Completed 3
Step 3
Configuring the Search Bar
completed
Next Steps
Conclusion
completed
home

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,
  }}
/>

vis-auto

<% elem.innerText %>