1

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!

3

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...").

| improve this answer | |
1

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.