Customize Autocomplete Prompts (Spring '22 Release)

[Kristy_Huang]

You can now set custom autocomplete prompts client side, in the Theme and Search UI SDK (rather than just the Answers backend) to allow you to modify the prompts based on the page where the search results live. Note that these prompts will always appear above any other prompts in the configuration. They will not be bolded as users type.

Upgrade Implications:

Note: This theme version includes breaking changes. Be sure to follow the upgrade implications in the breaking changes post.

This feature is available in Early Access in English on the branch early-access-spring-22. Here’s how to use the Early Access branches of the Theme and SDK!

There are several ways to set custom prompts, either through the theme or the SDK:

1. SDK search bar configuration: When initializing the library for the search bar, add a string array with the custom prompts in the autocomplete.customPrompts field. It will look something like:

ANSWERS.addComponent("SearchBar", {
  container: ".search_form",
  ...
  autocomplete: {
    customPrompts: [
      'This is a custom prompt',
      'Here is another example'
    ]
  }
  ...
});

2. SDK autocomplete component: Use the setCustomPrompts function to customize the autocomplete component after ANSWERS is initialized (note that this will override any existing custom prompts set in the init):

ANSWERS.components.getActiveComponent('AutoComplete')..setCustomPrompts([
    'This is a a custom prompt',
    'Here is another example'
])

3. Theme componentSettings: In the config.json file for each page you want to customize, specify custom prompts in the autocomplete.customPrompts field:

"componentSettings": {
  "SearchBar": {
    "placeholderText": "Search",
    ...
    "autocomplete": {
      "customPrompts": [
        "This is a custom prompt",
        "Here is another example"
      ]
    }
    ...
  }
}

4. Theme iFrame: If your search results page is iFramed, set custom prompts with runtimeConfig or through AnswersExperienceFrame.init (​​note that this will override any existing custom prompts set in theme’s componentSettings):

window.AnswersExperienceFrame.runtimeConfig.set('customPrompts', ['custom prompt from iframe']);