Splitting search results into tabs with no results messages

Question

We're building a search that has a tabbed results page, we have a tab for each channel, works great apart from when there's no results for a particular channel and we're struggling to find the correct way to hide the tab or display a no result message for each individual tab.

Here's the code we currently have:

<nav class="tabs">
  <ul>
    <li><a href="#first">Tab 1</a></li>
    <li><a href="#second">Tab 2</a></li>
  </ul>
</nav>
<div>
    <ul>
 {exp:search:search_results switch="even|odd" limit="2000"}
      {if channel_short_name == "channel_name_1"}
         <li class="{switch}">
             content here
         </li>
       {/if}
 {/exp:search:search_results}
    </ul>
</div>
<div>
    <ul>
 {exp:search:search_results switch="even|odd" limit="2000"}
      {if channel_short_name == "channel_name_2"}
         <li class="{switch}">
             content here
         </li>
       {/if}
 {/exp:search:search_results}
    </ul>
</div>

We've tried the following:

no_results with no joy, because we're using an if channel_short_name it won't know if that specific channel has no results.

Using {count} but this again includes all search results, not channel specific ones so doesn't work.

Using a new {exp:search:search_results} tag for each tab, but seems you can't specify channel in the search tag so this doesn't work either.

Any ideas greatly appreciated!

Answer 1

Maybe there's a better native ee way without enabling php, but I would use Stash or Low Search.

Use Stash (set_list) to set a list of all your search results and then you could have more control over outputting for each tab/channel (using get_list). When you set your list set a variable for channel (i.e.: "my_cached_channel_var"), and then when you output your list use 'match' and 'against' parameters on that same stash channel variable.

Use Low Search you could add a channel parameter to the results tag (from the docs: "The Results tag supports all parameters from the native channel:entries tag...").

Answer 2

Maybe a little bit of javascript/jquery to do it on the client-side :-)

(1) jQuery Move / direct the stuff into the correct tab.
First set a default <li> for each tab with a not-found message,
this can be replaced or removed after the result is set.

// all items
{chan:entries}
<li class="item {channel_short_name}">text</li>

// jQuery
$("#list .shortname1").appendTo('#tab_x');
$("#list .shortname2").appendTo('#tab_y');
// if count $(tab_x) > 1 then remove $(tab_x .notice)

(2) jQuery Show/hide items
Since it's a tab (link or button), you could also just use them as pseudo-tabs, and not move the items at all. e.g. keep the full list below the tabs and use a bit of jQuery to show/hide the items.
Something like $(#tab1).click(hide(not-shortname1)).
This also gives you the option of a tab with show_all().
(just some thoughts).

And indeed, stash set_list is a good server-side option.