Dropdown sorting and filtering using Jquery | 2my4edge

06 August 2015

Dropdown sorting and filtering using Jquery

Here i'm going to give you an tutorial about select option dropdown filter using Jquery with isotope.js. Before i have written on article about that isotope.js. that is portfolio style sorting with some animation effect now in dropdown select option tag. lets see the code.

dropdown filter and sorting using jquery
DOWNLOAD                LIVE DEMO

Most of them searching the script for this kind of dropdown filter sorting.. i hope this will be really helpful everyone. i have just altered few code in the previous post portfolio style sorting with some animation effect.

SCRIPTS AND CSS
<link href="css/style.css" rel="stylesheet" media="all" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/filters.js"></script>
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>



HTML CODE
<div class="portfolio-container" id="portfolio-container">
  <div class="portfolio all-sort css">
    <a href="http://www.2my4edge.com/2014/01/how-to-make-fixed-background-image-for.html">
      <div class="portfolio-thumb">
        <img src="images/1.gif" alt="" title="">
      </div>
    </a>
  </div>
  <div class="portfolio all-sort Jquery php">
    <a href="http://www.2my4edge.com/2014/04/web-camera-using-snapjs-jquery.html">
      <div class="portfolio-thumb">
        <img src="images/2.png" alt="" title="">
      </div>
    </a>
  </div>
  <div class="portfolio all-sort Jquery Javascript">
    <a href="">
      <div class="portfolio-thumb">
        <img src="images/3.gif" alt="" title="">
      </div>
    </a>
  </div>
  <div class="portfolio all-sort Javascript css">
    <a href="">
      <div class="portfolio-thumb">
        <img src="images/4.png" alt="" title="">
      </div>
    </a>
  </div>
  <div class="portfolio all-sort Javascript php">
    <a href="">
      <div class="portfolio-thumb">
        <img src="images/5.gif" alt="" title="">
      </div>
    </a>
  </div>
  <div class="portfolio all-sort css">
    <a href="">
      <div class="portfolio-thumb">
        <img src="images/6.gif" alt="" title="">
      </div>
    </a>
  </div>
  <div class="portfolio all-sort Jquery PHP">
    <a href="">
      <div class="portfolio-thumb">
        <img src="images/7.png" alt="" title="">
      </div>
    </a>
  </div>
  <div class="portfolio all-sort Jquery Javascript">
    <a href="">
      <div class="portfolio-thumb">
        <img src="images/8.png" alt="" title="">
      </div>
    </a>
  </div>
  <div class="portfolio all-sort Jquery html">
    <a href="">
      <div class="portfolio-thumb">
        <img src="images/9.gif" alt="" title="">
      </div>
    </a>
  </div>
  <div class="portfolio all-sort Jquery css">
    <a href="">
      <div class="portfolio-thumb">
        <img src="images/10.png" alt="" title="">
      </div>
    </a>
  </div>
  <div class="portfolio all-sort PHP database css html">
    <a href="">
      <div class="portfolio-thumb">
        <img src="images/11.png" alt="" title="">
      </div>
    </a>
  </div>
  <div class="portfolio all-sort Jquery PHP database">
    <a href="http://www.2my4edge.com/2013/11/dynamic-data-table-using-datatable.html">
      <div class="portfolio-thumb">
        <img src="images/12.png" alt="" title="">
      </div>
    </a>
  </div>
  <div class="portfolio all-sort css php database">
    <a href="http://www.2my4edge.com/2013/10/image-zoom-on-hover-using-css3.html">
      <div class="portfolio-thumb">
        <img src="images/13.gif" alt="" title="">
      </div>
    </a>
  </div>
  <div class="portfolio all-sort Jquery css Jquery">
    <a href="http://www.2my4edge.com/2013/08/resize-font-using-query.htm">
      <div class="portfolio-thumb">
        <img src="images/14.gif" alt="" title="">
      </div>
    </a>
  </div>
  <div class="portfolio all-sort PHP database css">
    <a href="">
      <div class="portfolio-thumb">
        <img src="images/15.png" alt="" title="">
      </div>
    </a>
  </div>
</div>

SELECT OPTION DROPDOWN LIST
<div class="sorting-container">
    <h4> Filter : </h4>
    <select class="form-control" id="selectFieldscript">
      <option value="all-sort">All Script</option>
      <option value="Javascript">Javascript</option>
      <option value="Jquery">Jquery</option>
    </select>
    <select class="form-control" id="selectFielddynamic">
      <option value="all-sort">All dynamic</option>
      <option value="PHP">PHP</option>
      <option value="database">database</option>
  </select>
  <select class="form-control" id="selectFieldcode">
     <option value="all-sort">All design</option>
     <option value="html">html</option>
     <option value="css">css</option>
  </select>
</div>

FILTERS.JS
; (function(){

jQuery('document').ready(function() {
    function filter_portfolio() {
        var script = jQuery('#selectFieldscript').val();
        var dynamic = jQuery('#selectFielddynamic').val();
        var code = jQuery('#selectFieldcode').val();
        var target = '';
        
        if(script != 'all-sort') { target += '.' + script; }
        if(dynamic != 'all-sort') { target += '.' + dynamic; }
        if(code != 'all-sort') { target += '.' + code; }
        if(target == '') target = '.all-sort';
        var $items_container = jQuery("#portfolio-container");      
        $items_container.isotope({
            itemSelector : ".portfolio",
            layoutMode: "masonry",
            filter: target
        });
    }
    jQuery('#selectFieldscript, #selectFielddynamic, #selectFieldcode').on('change', function() {
        filter_portfolio();
    });
}); 
})();

3 comments:

  1. Hi I have added all the files the filter works fine but they don't have any animation/transition can you please help.

    ReplyDelete
  2. hy tell me how to clear all the filter on a click of button

    ReplyDelete
  3. hey tell me how to clear all the apply filters on a button click?

    ReplyDelete

^