Multiple Search Boxes

This demo shows two search boxes on one page, each searching a different set of result groups and showing its results in its own column. Search for pizza in the left box to get every result group, then in the right box to get only the café menu. The results of the last search replace the previous ones. 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.

In Design & Publish: Settings → Results → Result Groups hides groups for a whole configuration. To limit one search box, add data-ss360-include to its input.

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

window.ss360Config = {
   siteId: '83460', /* 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":"83460","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>