# 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`](https://docs.airdev.co/canvas-pages-and-modules/modules/applyfilters) for applying filters. No workflows are associated with this module. 

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LgUGGax46RdOqvGSM67%2F-LgUGmRscb5K-6pLF1Ku%2FScreen%20Shot%202019-06-03%20at%202.37.49%20PM.png?alt=media\&token=67ea5ec6-3e16-4db4-b434-dbe3e4aa510c)

## 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*

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LgUGGax46RdOqvGSM67%2F-LgUN7zOmOLcnlDdHjAH%2FScreen%20Shot%202019-06-03%20at%203.05.10%20PM.png?alt=media\&token=e9582177-ebaa-4e14-8796-845c6cdc50b5)

* Modify the filter options in the reusable element for `applyfilters`. [`Click here`](https://docs.airdev.co/canvas-pages-and-modules/modules/applyfilters) 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

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LgUGGax46RdOqvGSM67%2F-LgUMQOt_0_nVW0Gnvr5%2FScreen%20Shot%202019-06-03%20at%203.02.09%20PM.png?alt=media\&token=fe6d049c-8957-4463-9a20-39b32bdda9ba)