Tips To Create Advanced Custom Search Filters

Custom Search Filters

Introduction

Sometimes it becomes challenge while searching a specific thing on big websites having lots of stuff. At that time we definitely need very powerful search section which can ease our experience of searching the defined things from the website.   

 

This blog is related to advanced custom search filter. This advanced custom search functionality is very effective and useful with complex category structure. Such advanced search gives the website users the ability to narrow their searches by applying series of different filters.

 

With this custom search section,  one can easily search by applying filters in desired categories and subcategories big list, by selecting/deselecting the available options. At the end user will get the dynamic separate list of his selections for each category. This functionality is accomplished using simple HTML5, CSS3, and customized jquery. 

 

To execute the filtering the search options, a user first needs to choose the main category. On click of the main category, the subcategory list gets open, from which user can select/deselect his desired options. The main functionality of this tool executes with the selection of the subcategories. The list of selected options is dynamically appended to the separate list which will be visible as user's search list. The user can modify this selection by adding or removing the options and can submit them all at once after reviewing the final list of selection. 

 

Please check Live Demo here.

Below are the code and snaps for the working functionality.

1. Advanced search filter with primary first level main category selection

Advanced search filter

2. On-click of  “Application” tab the options of selected category are open in dropdown.

selected category

3. When a user selects sub options from drop-down menu it starts appending in user selection area.

drop-down menu

4. When user removes selected options from option list (dropdown open view).

option list

5. User’s selection which appended to a separate list (dropdown closed view).

separate list

Use the below code to implement this design:

HTML:

Modify your card in the li tag or use as it is given below

<div class="advanced-search">
  <div class="divSearchPanel">
    <div class="filter-wrap">
      <div class="filter-title">Application</div>
      <a href="javascript:void(0);" class="apply-change-btn">Apply changes</a>
      <div class="filter-details">
        <ul class="search-options-list">
          <li><a href="javascript:void(0);">Elisa</a></li>
          <li><a href="javascript:void(0);">Flow Cytometry</a></li>
          <li><a href="javascript:void(0);">Chemistry</a></li>
          <li><a href="javascript:void(0);">Fixed</a></li>
          <li><a href="javascript:void(0);">Frozen</a></li>
          <li><a href="javascript:void(0);">Luorescence</a></li>
          <li><a href="javascript:void(0);">Immuno</a></li>
        </ul>
      </div>
      <div class="selected-group-options"></div>
    </div>
    <div class="filter-wrap">
      <div class="filter-title">Reactivity</div>
      <a href="javascript:void(0);" class="apply-change-btn">Apply changes</a>
      <div class="filter-details">
        <ul class="search-options-list">
          <li><a href="javascript:void(0);">Human</a></li>
          <li><a href="javascript:void(0);">Mouse</a></li>
          <li><a href="javascript:void(0);">Rat</a></li>
          <li><a href="javascript:void(0);">Hourse</a></li>
          <li><a href="javascript:void(0);">Rabbit</a></li>
          <li><a href="javascript:void(0);">Sheep</a></li>
          <li><a href="javascript:void(0);">Virus</a></li>
        </ul>
      </div>
      <div class="selected-group-options"></div>
    </div>
    <div class="filter-wrap">
      <div class="filter-title">Clonality</div>
      <a href="javascript:void(0);" class="apply-change-btn">Apply changes</a>
      <div class="filter-details">
        <ul class="search-options-list">
          <li><a href="javascript:void(0);">Monoclonal</a></li>
          <li><a href="javascript:void(0);">Polyclonal</a></li>
        </ul>
      </div>
      <div class="selected-group-options"></div>
    </div>
    <div class="filter-wrap">
      <div class="filter-title">Isotype</div>
      <a href="javascript:void(0);" class="apply-change-btn">Apply changes</a>
      <div class="filter-details">
        <ul class="search-options-list">
          <li><a href="javascript:void(0);">IgG</a></li>
          <li><a href="javascript:void(0);">IgG1</a></li>
          <li><a href="javascript:void(0);">IgG gamma</a></li>
          <li><a href="javascript:void(0);">IgG1 gamma</a></li>
          <li><a href="javascript:void(0);">IgG1 kappa</a></li>
        </ul>
      </div>
      <div class="selected-group-options"></div>
    </div>
  </div>
</div>


CSS :


I have used some common css in each card-stack type which goes for each type.

body {
  margin: 0;
}
* {
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
}

.advanced-search {
  display: block;
  min-height: 200px;
  max-width: 700px;
  margin: 30px auto;
  padding: 20px;
  background-color: #E5EFF6;
}
.divSearchPanel {
  display: inline-block;
  width: 100%;
}
.filter-wrap {
  float: left;
  position: relative;
  display: inline-block;
  width: 25%;
}
.filter-title {
  display: block;
  padding: 10px 20px;
  border: 1px solid #DDD;
  background-color: #FFF;
}
.filter-details {
  position: absolute;
  top: 39px;
  left: 0;
  display: none;
  width: 100%;
  border: 1px solid #DDD;
  z-index: 99;
}
.filter-details.drop-down-in {
  display: inline-block;
}
.filter-details .search-options-list {
  display: inline-block;
  width: 100%;
  margin-top: 0;
}
.filter-details .search-options-list li {
  padding: 10px;
  background-color: #FFF;
  border-bottom: 1px solid #DDD;
}
.filter-details .search-options-list li a {
  pointer-events: none;
  text-decoration: none;
  color: inherit;
}
.filter-details .search-options-list li.selected {
  background-color: #D5E9F4;
}
.filter-details .search-options-list li.selected:hover {
  background-color: #EBC9C9;
}

.selected-group-options {
  display: inline-block;
  width: 100%;
}
.selected-group-options a {
  display: inline-block;
  width: 100%;
  padding: 10px;
  margin-top: -1px;
  border: 1px solid #CCC;
  background-color: #D1D1D1;
  color: #000;
  text-decoration: none;
}
.selected-group-options a:hover {
  background-color: #EBC9C9;
}

.apply-change-btn {
  display: none;
  width: 100%;
  padding: 10px;
  background-color: #F7EF94;
  color: #127EC4;
  text-align: center;
  text-decoration: none;
  border: 1px solid #CCC;
  margin-top: -1px;
}
.show-apply-btn {
  display: inline-block;
}
.top-show-btn {
  top: 77px;
}

/* Responsive design */
@media (max-width: 767px) {
  .filter-wrap {
    width: 50%;
    margin-bottom: 40px;
  }
  .filter-wrap:nth-child(2n+1) {
    clear: left;
  }
}

Jquery :

jQuery(document).ready(function() {

  // Search event page
  jQuery('.filter-wrap').each(function(){
    jQuery(this).find('.filter-title').click(function(e) {
      e.stopPropagation();
      if (jQuery(this).siblings('.filter-details').hasClass('drop-down-in')) {
        jQuery('.filter-wrap .filter-details').removeClass('drop-down-in');
      }
      else {
        jQuery('.filter-wrap .filter-details').removeClass('drop-down-in');
        jQuery(this).siblings('.filter-details').addClass('drop-down-in');
      }
    });
  });
  jQuery('.filter-details').click(function(e) {
    e.stopPropagation();
  });

  jQuery('.filter-details .search-options-list').click(function(e) {
    jQuery(this).parent('.filter-details').prev('.apply-change-btn').addClass('show-apply-btn');
    jQuery(this).parent('.filter-details').addClass('top-show-btn');
  });

  var repeatID = 1;
  jQuery('.filter-details .search-options-list li').each(function(i, v) {
    jQuery(v).find('a').attr('id', 'id_'+ repeatID);
    repeatID ++;
  });

  jQuery('.filter-details .search-options-list li').on('click',function(){
    var aID = jQuery(this).find('a').attr('id');
    if(jQuery(this).hasClass('selected')) {
      jQuery(this).removeClass('selected');
      jQuery.each(jQuery(this).parents('.filter-details').next('.selected-group-options').find('a'),function(i,v){
        if(jQuery(v).attr('id') == aID) {
          jQuery(v).remove();
        }  
      })
    } else {
      jQuery(this).addClass('selected');
      var str = jQuery(this).html();
      jQuery(this).parents('.filter-details').next('.selected-group-options').append(str);  
    }
    // debugger;
  });

  jQuery('.selected-group-options').on('click','a',function(){
    var aID = jQuery(this).attr('id');
    jQuery(this).remove();
    jQuery.each(jQuery('.search-options-list').find('li'),function(i,v){
      if(jQuery(v).find('a').attr('id') == aID) {
        // jQuery(v).remove();
        jQuery(v).removeClass('selected');
      }  
    })
  });

  // jQuery('.search-options-list li.selected a').click(function() {
  //   alert('test');
  //   jQuery(this).remove();
  // });
  
  // end

});

 

Please check Live Demo here.

Browser support:

Most of the CSS3 property is supported in all kinds of browsers. Below shows the list of browsers which support the above piece of codes.

 

IE Edge Firefox Chrome Safari Opera

 

Hope this blog is quickly and easily guide to for creating Advanced Custom Search Filters on your website. Need more assistance regarding Web Design Services Contact us now!