University of Derby

Search Filters: Dropdown input 

<div class="search-result-filters-button">
    <a href="#" class="button-outline" role="button" tabindex="0" data-scroll><i class="button-icon uod-icons uod-icons-filter-funnel"></i>    Filters
            <span class="button-overlay"><span><i class="button-icon uod-icons uod-icons-filter-funnel"></i>            Filters
                    </span></span></a></div>
<div class="search-result-filters">
    <div class="search-result-filters-header">
        <div class="search-result-filters-submit-wrapper">
            <a href="#" class="button-yellow" role="button" tabindex="0" data-scroll>
        Apply filters
            <span class="button-overlay"><span>
                        Apply filters
                    </span></span></a> </div>
        <div class="search-result-navigation-close">
            <a href="#">
                <i class="uod-icons uod-icons-cross"></i>
            </a>
        </div>
    </div>
    <div class="search-result-filters-collection">
        <section class="search-result-filters-group">
            <h6>Filter by result type</h6>
            <select class="select" name="result-type" id="result-type">
                <option value="">Select an option</option>
                                    <option id="result-type-course" checked>Course (2)</option>
                                    <option id="result-type-news">News (2)</option>
                                    <option id="result-type-online">Online (10)</option>
                                    <option id="result-type-foundation">Foundation (0)</option>
                                    <option id="result-type-part-time">Part-time (2)</option>
                            </select>
        </section>
    </div>
</div>
 
<div class="search-result-filters-button">
    {% include '@button' with {
        label: filtersApplied ? "Filters (" ~ filtersApplied ~ " Applied)" : 'Filters',
        href: '#',
        icon: 'filter-funnel'
    } %}
</div>
<div class="search-result-filters">
    <div class="search-result-filters-header">
        <div class="search-result-filters-submit-wrapper">
            {% include '@button' with {
                label: 'Apply filters',
                href: '#',
                scheme: 'yellow'
            } %}
        </div>
        <div class="search-result-navigation-close">
            <a href="#">
                <i class="uod-icons uod-icons-cross"></i>
            </a>
        </div>
    </div>
    <div class="search-result-filters-collection">
        {% for group in filterGroups %}
        <section class="search-result-filters-group">
            <h6>{{ group.title }}</h6>
            {% if group.type == 'dropdown' %}
            <select class="select" name="{{ group.id }}" id="{{ group.id }}">
                <option value="">Select an option</option>
                {% for filter in group.filters %}
                    <option id="{{ filter.tag ? filter.tag : filter.label|lower|replace({' ':'-'}) }}"{% if filter.checked %} checked{% endif %}{% if filter.count == 0 %} disabled{% endif %}>{{ filter.label }} ({{ filter.count | number_format }})</option>
                {% endfor %}
            </select>
            {% else %}
                {% for filter in group.filters %}
                <div class="search-result-filter{% if filter.count == 0 %} disabled{% endif %}">
                    <div class="search-result-filter-checkbox">
                        {% if group.type == 'radio' %}
                        <input class="iradio_flat-blue" name="{{ group.id }}" type="radio" id="{{ filter.tag ? filter.tag : filter.label|lower|replace({' ':'-'}) }}"{% if filter.checked %} checked{% endif %}{% if filter.count == 0 %} disabled{% endif %}/>
                        {% else %}
                        <input class="icheckbox_flat-blue" name="{{ filter.tag ? filter.tag : filter.label|lower|replace({' ':'-'}) }}" type="checkbox" id="{{ filter.tag ? filter.tag : filter.label|lower|replace({' ':'-'}) }}"{% if filter.checked %} checked{% endif %}{% if filter.count == 0 %} disabled{% endif %}/>
                        {% endif %}
                    </div>
                    <label class="search-result-filter-label" for="{{ filter.tag ? filter.tag : filter.label|lower|replace({' ':'-'}) }}">{{ filter.label }} ({{ filter.count | number_format }})</label>
                </div>
                {% endfor %}
            {% endif %}
        </section>
        {% endfor %}
    </div>
</div>
 
{
  "filterGroups": [
    {
      "title": "Filter by result type",
      "id": "result-type",
      "type": "dropdown",
      "filters": [
        {
          "label": "Course",
          "count": 2,
          "checked": true,
          "tag": "result-type-course"
        },
        {
          "label": "News",
          "count": 2,
          "tag": "result-type-news"
        },
        {
          "label": "Online",
          "count": 10,
          "tag": "result-type-online"
        },
        {
          "label": "Foundation",
          "count": null,
          "tag": "result-type-foundation"
        },
        {
          "label": "Part-time",
          "count": 2,
          "tag": "result-type-part-time"
        }
      ]
    }
  ]
}
  • Content: 
    import $ from 'jquery'
import 'selectric'
import 'icheck'

//
// add the custom checkbox visuals
//
$('.search-result-filters input').iCheck({
    checkboxClass: 'icheckbox_flat-blue',
    radioClass: 'iradio_flat-blue'
});

//
// add functionality to toggle the mobile search menu
//
$('.search-result-filters-button [role=button],.search-result-filters-submit-wrapper [role=button], .search-result-navigation-close a').on('click', function (event) {
    event.preventDefault();
    $('.search-result-filters').toggleClass('search-result-filters-active');
});

//
// select box styling
//
$('.search-result-filters-group select').selectric({ responsive: true });
  • URL: /components/raw/search-filters/search-filters.js
  • Filesystem Path: components/components/search-results/search-filters/search-filters.js
  • Size: 663 Bytes
  • Content: 
    .search-result {

    &-filters-header {
        position: relative;
        padding-top: px-to-em(70, 17);

        @include for-tablet-landscape-up {
            padding-top: 0;
        }
    }

    &-filters-submit-wrapper {
        position: absolute;
        top: 10px;

        @include for-tablet-landscape-up {
            display: none;
        }
    }

    &-navigation-close {
        position: absolute;
        top: px-to-em(26, 25);
        right: 0;
        width: 25px;
        height: 25px;
        line-height: 1;
        font-size: px-to-em(25, 17);

        @include for-tablet-landscape-up {
            display: none;
        }

        a {
            @include disable-underlines;

            display: inline-block;
            transition: transform .3s $default-animation-curve;
            color: $white;

            &:hover {
                transform: rotate(90deg);
            }
        }
    }

    &-filters {
        @include full-bleed-inset;
        display: none;
        font-family: $header-font;
        font-size: 16px;

        @include for-tablet-landscape-up {
            display: block;
            padding: 0;
        }

        &-group {
            margin-bottom: px-to-em(10, 16);
            background: $light-grey;
            padding: px-to-em(20, 16);
        }

        &-active {
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 10;
            background: $black;
            min-height: 100vh;

            @include for-tablet-landscape-up {
                position: relative;
                background: initial;
                min-height: initial;
            }
        }

        &-button {
            @include for-tablet-landscape-up {
                display: none;
            }
        }

        &-collection {
            max-height: #{'calc(100vh - ' + px-to-em(70, 16) + ')'};
            overflow: scroll;

            @include for-tablet-landscape-up {
                max-height: 100%;
                overflow: visible;
            }
        }
    }

    &-filter {
        display: block;
        position: relative;
        margin-bottom: px-to-em(8, 16);

        &-label {
            display: inline-block;
            cursor: pointer;
            padding-top: px-to-em(4, 16);
            padding-right: px-to-em(4, 16);
            padding-bottom: px-to-em(4, 16);
            padding-left: px-to-em(34, 16);
            line-height: 1.15;
        }

        &-checkbox {
            position: absolute;
        }

        &.disabled {
            color: $dark-grey;
        }
    }
}

.icheckbox_flat-blue {
    background: $white;
}
  • URL: /components/raw/search-filters/search-filters.scss
  • Filesystem Path: components/components/search-results/search-filters/search-filters.scss
  • Size: 2.7 KB

Search Result Filters

Filters for selecting and deselecting search result options. Panels are visible by default on desktop, and on mobile and tablet devices are appear through a modal overlay.

By default the options are “checkbox” but can be changed to “radio” buttons via the “type” parameter. If using the “radio” type, you should also specify the “id” of the group.

Key Features

  • Mobile / Tablet modal overlay
  • Filter with radiobox, checkbox or dropdown components

Properties

  • filterGroups [required, Array of FilterCollection]

FilterCollection

  • title [required, string]
  • id [optional, string]
  • type [optional, string “radio”, “dropdown” or “checkbox” default “checkbox”]
  • filters [required, Array of FilterObject]

FilterObject

  • label [required, string]
  • count [optional, integer]
  • tag [optional, string]
  • checked [optional, boolean]