How to customize Instant Suggestions

Once Instant Suggestions is correctly implemented on your search, the feature can be customized further to match the rest of the website.

Instant Suggestions can be styled with both CSS classes as well as a few settings in the cludoSettings object in the template.

CSS classes

Instant Suggestions container

.search_autocomplete.instant_suggestions{
  /* Insert styling */
}

Headers

.search_autocomplete.instant_suggestions h3{
  /* Insert styling */
}

List items

.search_autocomplete.instant_suggestions li{
  /* Insert styling */
}

Custom Headers

Two string values in the cludoSettings object can be defined to change the custom headers.

By default, headers are set to “Suggested searches” and “Recent searches”. These headers are fully translated for all supported languages.
To override these headers, The following changes are needed:

var cludoSettings = {
  ...
  suggestedSearchesHeader: 'My custom header for suggested searches',
  recentSearchesHeader: 'My custom header for recent searches'
}