Skip to main content

Search Suggestions

This demo shows data points in the search suggestions: the cost of each recipe as text and the prep time as a chip. Type granola or chicken to try it. View the ss360Config to check the configuration.

  • suggestions.source.queryBased.content lists the blocks shown while the searcher types. A resultGroup block shows the best-matching results.
  • Each entry in dataPoints names a data point by its key. type: 'value' shows it as text, type: 'chip' as a badge.

You can build the same suggestions without code in Design & Publish → Suggestions, see Query-based suggestions. To show suggestions before the searcher types, see the Empty State Suggestions demo.

window.ss360Config = {
   siteId: 'spoonacular.com', /* Replace with your site id */
   searchBox: {
      selector: '#searchBox' /* Replace with the css selector of your search box */
   },
   suggestions: {
      source: {
         queryBased: {
            content: [{
               type: 'resultGroup',
               dataPoints: [
                  { key: 'Cost', type: 'value' },
                  { key: 'Prep Time', type: 'chip' }
               ]
            }]
         }
      }
   }
};
{"siteId":"spoonacular.com","searchBox":{"selector":"#searchBox"},"suggestions":{"source":{"queryBased":{"content":[{"type":"resultGroup","dataPoints":[{"key":"Cost","type":"value"},{"key":"Prep Time","type":"chip"}]}]}}}}