Single Input Search Bar and Filter Group

Overview

This is a fully-responsive module that includes a search bar with an input and a reusable called applyfilters for applying filters. No workflows are associated with this module.

Structure

• When this module is added to a page, it is placed within a group called Group page860Group on the page. This group contains the responsive settings for all modules.

• This module Group singleSearchFilter contains three main groups:

  • Group responsive - For responsiveness (please do not delete). This group will hide and collapse when the current page width is less than or equal to 500

  • Group reponsive2 - For responsiveness (please do not delete). This is an optional padding group below the search bar. Hide if not needed.

  • Group search bar - This group contains an input, clear input button, and filter options.

• All data is displayed in RepeatingGroup 780-TextFormattedExpandableGroup

How to set up

• Add the following workflow to the page (this removes the filter's circular background hover effect):

  • When page is loaded, set state of applyfilters's Remove background hover? to yes

• Modify the filter options in the reusable element for applyfilters. Click here for more information.

• Add a search constraint to your repeating group on the page

  • Refer to Input Search for something

• Uncheck the box for This element is visible on page load for Group responsive2 if you do not need the extra padding beneath the search bar