Tag Cloud Search – Overview

This is a feature of the Premium plan. Tag Groups Premium

The Tag Cloud Search is an element that you can add into a page to let visitors filter tag clouds by tag names. It works together with the following tag clouds:

The Shuffle Box has its own text search field.

You simply add this feature as shortcode or Gutenberg block to the same page where you use one or more of these tag clouds. It will generate an input field where visitors can enter a search term. The filtering will happen live while they type.

In order to tell the Tag Cloud Search, which tag clouds to search, you need to connect them. Simply enter the same class name under “Connection” in the block or as tag_cloud_class that you have used in the corresponding tag cloud(s). You don’t need to replace existing class names in the tag cloud. It is sufficient to append it, separated by a space.

Example for shortcodes:

[tag_groups_cloud_search tag_cloud_class="searchable-tag-cloud-1"]

On the same page you use a tag cloud with the same class name “tag-groups-cloud-1” among its classes:

[tag_groups_cloud div_class="tag-groups-theme-green searchable-tag-cloud-1" prepend="#" append="{count}" separator="+"]

Now the search will filter the tags in this cloud.

Notes

  • The filter always works on the tag names. You can chose to filter additionally by tag descriptions. For that to work you need to display the description in the “title” attribute1: Use the placeholder {description} in the “custom title” field or parameter.
  • If you use the filter with the Tabbed Tag Cloud or the Alphabetical Tabs, we automatically open the tab of the first tag that matches the filter. This, however, doesn’t work if you connect the Tag Cloud Search with more than one tag clouds.
  • The filter is case-insensitive: When you type “apple”, you see both the tags “Big Apple” and “pineapple”.
  • Please note that – with or without the Tag Cloud Search – none of these tag clouds dynamically loads tags from the server. The filtering affects only tags that were initially loaded.

Options

Demos

Go to the demos.

Footnotes

  1. i.e. in the tooltip[]