How to style Instant Suggestions

Once Instant Suggestions is correctly implemented on the website, the feature can be styled further to match the rest of the visuals of the website.

Instant Suggestions can be styled with both CSS classes as well as 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'
}