# Single Input Search Bar and Filter Group

## Overview

This is a fully responsive block that includes a search bar with an input and a reusable called [applyfilters](https://docs.airdev.co/canvas-pages-and-modules/v/2.0.0/reusables/applyfilters) for applying filters. No workflows are associated with this block. 

![](https://576109535-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 ***Blocks container 860 (do not rename)*** on the page. This group contains the responsive settings for all blocks.
* This block ***Group Main search filter*** contains two main groups:
  * ***Group Inner search bar*** \
    This group contains an input, clear input button, and filter options.
  * ***Group PLACEHOLDER search*** \
    This is a placeholder group. To add more content to the search bar, resize this group to make space. Please ensure that no elements are overlapping otherwise it would lead to responsiveness issues.

## 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://576109535-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/v/2.0.0/reusables/applyfilters) for more information.
* Add a search constraint to your repeating group on the page

![Repeating group constraint references Input Search for something's value](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MRfbIDPPa3js1IikHv6%2F-MRfeNrYB1yO6L_kxJdY%2FScreen%20Shot%202021-01-22%20at%2011.54.10%20AM.png?alt=media\&token=f3dde44f-a06f-4283-b494-98a77343917c)