Search box with filters

For better performance during retrieving results, filters can be selected before searching.

Interactive demo

Option1: When the filters are more than 4

Multiselect dropdown with check boxes are used to show the filters.

When filters are opened

When filters are selected

Mobile View

<div class="input-group search-box search-filter-multiselect">
   <div class="input-group-prepend"> <i class="far fa-search"></i> </div>
   <input type="search" class="form-control" placeholder="Search by keyword" aria-label="" aria-describedby=""> 
   <select class="form-control searchFilters" id="searchFilters" multiple>
      <option>Item 1</option>
      <option>Item 2</option>
      <option>Item 3</option>
      <option>Item 4</option>
      <option>Item 5</option>
      <option>Item 6</option>
   </select>
   <div class="input-group-append"> <button class="btn btn-primary" type="button">Search</button> </div>
</div>

Option2: When the filters are upto 4

Checkboxes are shown as filters below the search field.

<div class="search-box search-filter-checkbox bg-khaki">
   <div class="input-group ">
      <div class="input-group-prepend"> <i class="far fa-search"></i> </div>
      <input type="search" class="form-control" placeholder="Search by keyword" aria-label="" aria-describedby="">
   </div>
   <div class="form-group mt-2">
      <span class="mt-2 mr-2 d-md-inline-block d-sm-block"> <strong> Search in</strong></span>
      <div class="form-check form-check-inline d-sm-inline-block"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Category 1 <span class="checkbox-overlay "></span> </label> </div>
      <div class="form-check form-check-inline d-sm-inline-block"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Category 2 <span class="checkbox-overlay "></span> </label> </div>
      <div class="form-check form-check-inline d-sm-inline-block"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Category 3 <span class="checkbox-overlay "></span> </label> </div>
      <div class="form-check form-check-inline d-sm-inline-block"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Category 4 <span class="checkbox-overlay "></span> </label> </div>
   </div>
   <div class="text-center"> <button class="btn btn-primary" type="button">Search</button> </div>
</div>

When to use

Search box with filters should be used when:

• To improve the search performance when there are more records, meaning the information is massive, actively searching can become too slow to be practical. Filter checkboxes will return the results faster.

• When users are searching an application or website they’re unfamiliar with, filtered search feature can give them a better idea of data structure and available categories.