Multiple Search Boxes

This demo shows two search boxes on one page, each searching a different set of result groups and showing results in its own column. Search for pizza in both boxes to compare. View the ss360Config to check the configuration.

• The first box has data-ss360-include="[]", so it searches all result groups.
• The second box has data-ss360-include="['Menu Items']", so it only returns the Menu Items group.
• The preSearch callback checks which box was used and points results.embedConfig at that box's column.

See Scoping search results for data-ss360-include and data-ss360-exclude, and Multiple search boxes for the setup guide.

window.ss360Config = {
   siteId: 'spoonacular.com', /* Replace with your site id */
   searchBox: {
      selector: '.ss360-search-box' /* Matches both search boxes */
   },
   results: {
      embedConfig: {
         contentBlock: '.results-all'
      }
   },
   callbacks: {
      preSearch: function (query, sort, selectedSearchBox) {
         var searchBoxId = selectedSearchBox ? selectedSearchBox.get()[0].id : 'sb1';
         SS360.changeConfig('results.embedConfig', {
            contentBlock: searchBoxId === 'sb2' ? '.results-menu-items' : '.results-all'
         });
         return true;
      }
   }
};

{"siteId":"spoonacular.com","searchBox":{"selector":".ss360-search-box"},"results":{"embedConfig":{"contentBlock":".example__page-content-block"}}}

<input id="sb1" class="ss360-search-box" type="search" data-ss360-include="[]">
<input id="sb2" class="ss360-search-box" type="search" data-ss360-include="['Menu Items']">

<div class="results-all"></div>
<div class="results-menu-items"></div>