Searchable Space List Template | Communifire Documentation

The Searchable Space List template displays a list of spaces with a search bar. The template is a built-in template and comes with your Communifire site. The template is used for the Spaces menu in the header by default.

How to use the Searchable Space List template

1. In Control Panel > Page Builder > Header, edit the Community Header
2. Expand the "Navigation" Section widget
3. Expand the "Spaces" Section widget
4. Edit the "My Spaces" Space List widget
5. Select the Searchable Space List template in the Template tab
6. Save the widget and page

Template HTML

Below is the HTML of this template, for your reference.

<div id="SpaceList{{WidgetID}}" class="{{CustomCSSClass}}">
    {{#if ShowWidgetHeader}}
    <ul class="ax-diamond-hover-box-header">
        <li class="nav-header">
            {{{WidgetTitle}}}
            <span class="pull-right">
                <a title="Spaces" href="{{ViewAllURL}}">{{{Resources.GlobalViewAllText}}}</a></span>
        </li>
        <li class="divider"></li>
    </ul>
    {{/if}}
    <div class="ax-space-menu-filter">
        <input type="text" id="SpaceFilter{{WidgetID}}" class="input-block-level hasPlaceholder" placeholder="{{Resources.GlobalSearchWatermarkText}}">
    </div>
    <ul class="ax-diamond-hover-box-dropdown ax-diamond-hover-box-dropdown-spaces">
        {{#each Contents}}
        <li class="">
            <a href="{{SpaceURL}}" class="space-home-link"><img alt="{{SpaceName}}" src="{{SpaceImageURL}}"><span class="anchor-text">{{{SpaceName}}}</span></a>
        </li>
        {{/each}}
    </ul>
</div>
<script type="text/javascript">
    jQuery(function () {
        jQuery('#SpaceList{{WidgetID}}').on('keypress', 'input', function(event) {
            if (event.keyCode == 13) {
                event.preventDefault();
            }
        });
        
        jQuery('#SpaceList{{WidgetID}}').find('li').on('click', function(e) {
            jQuery('#SpaceList{{WidgetID}}').hide();
        });

        jQuery('#SpaceFilter{{WidgetID}}').keyup(function () {
            var me = jQuery(this);
            var filter = me.val(), count = 0;
            jQuery('#SpaceList{{WidgetID}}').find('.ax-diamond-hover-box-dropdown-spaces li').each(function () {
                if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
                    jQuery(this).addClass("hidden");
                } else {
                    jQuery(this).removeClass("hidden");
                    count++;
                }
            });
        });
    });
</script>