Skip to main content

Empty State Suggestions

This demo shows suggestions as soon as the searcher clicks into the search box, before typing anything. Click the search box to try it. View the ss360Config to check the configuration.

  • suggestions.source.emptyState.content lists the blocks, in order.
  • searchHistory shows the searcher's own recent queries. It stays empty until they've searched.
  • popularQueries and popularResults show what other searchers look for most.

You can build the same suggestions without code in Design & Publish → Suggestions, see Empty state suggestions.

window.ss360Config = {
   siteId: 'spoonacular.com', /* Replace with your site id */
   searchBox: {
      selector: '#searchBox' /* Replace with the css selector of your search box */
   },
   suggestions: {
      source: {
         emptyState: {
            content: [
               { type: 'searchHistory' },
               { type: 'popularQueries' },
               { type: 'popularResults' }
            ]
         }
      }
   }
};
{"siteId":"spoonacular.com","searchBox":{"selector":"#searchBox"},"suggestions":{"source":{"emptyState":{"content":[{"type":"searchHistory"},{"type":"popularQueries"},{"type":"popularResults"}]}}}}