title: isotope filters + search with reset
body: <p>I'm trying to make my isotope grid work with a reset where all filters &amp; the search clear out and things go back to its original state before any interaction.</p>
  
  <p>With what I have so far, things clear out to a certain degree, however, the "active" state of the "li" elements are not working - Also, I'm not a fan of what I had to do to get to at least this point...duplicating code, is there a better way to handle all this?</p>
  
  <p>The issue I'm at right now is that if I have the grid set to "ALL" by default, then I type in text in search field, then select a filter, when I reset, the active state stays on the filter I selected when it shouldn't, it should go back to its default of "ALL" filter.  Hopefully I explained this well enough :/</p>
  
  <p>Any help on this is appreciated.</p>
  
  <p>JS:</p>
  
  <pre><code>var qsRegex;
  var buttonFilter;
  // init Isotope
  var $grid = $('.directory').isotope({
      itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
      layoutMode: 'fitRows',
      filter: function() {
          var $this = $(this);
          var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
          var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
          return searchResult &amp;&amp; buttonResult;
      }
  });
  $('.directory_menu ul').on( 'click', 'li', function() {
      buttonFilter = $( this ).attr('data-filter');
      $grid.isotope();
  });
  // use value of search field to filter
  var $quicksearch = $('.quicksearch').keyup( debounce( function() {
      qsRegex = new RegExp( $quicksearch.val(), 'gi' );
      $grid.isotope();
  }));
  // change active class on buttons
  $('.directory_menu ul').each( function( i, buttonGroup ) {
      var $buttonGroup = $( buttonGroup );
      $buttonGroup.on( 'click', 'li', function() {
          $buttonGroup.find('.active').removeClass('active');
          $( this ).addClass('active');
      });
  });
  // debounce so filtering doesn't happen every millisecond
  function debounce( fn, threshold ) {
      var timeout;
      threshold = threshold || 100;
      return function debounced() {
          clearTimeout( timeout );
          var args = arguments;
          var _this = this;
          function delayed() {
              fn.apply( _this, args );
          }
          timeout = setTimeout( delayed, threshold );
      };
  }
  
  // RESETTING
  $('.directory_search_reset').on('click', function() {
      //hide reset button
      $('.directory_search_reset').hide();
      //clear search field
      $('.directory_search input[type="search"]').val('');
      var qsRegex;
      var buttonFilter;
      // init Isotope
      var $grid = $('.directory').isotope({
          itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
          layoutMode: 'fitRows',
          filter: function() {
              var $this = $(this);
              var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
              var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
              return searchResult &amp;&amp; buttonResult;
          }
      });
      $('.directory_menu ul').on( 'click', 'li', function() {
          buttonFilter = $( this ).attr('data-filter');
          $grid.isotope();
      });
      // use value of search field to filter
      var $quicksearch = $('.quicksearch').keyup( debounce( function() {
          qsRegex = new RegExp( $quicksearch.val(), 'gi' );
          $grid.isotope();
      }));
      // change active class on buttons
      $('.directory_menu ul').each( function( i, buttonGroup ) {
          var $buttonGroup = $( buttonGroup );
          $buttonGroup.on( 'click', 'li', function() {
              $buttonGroup.find('.active').removeClass('active');
              $( this ).addClass('active');
          });
      });
      // debounce so filtering doesn't happen every millisecond
      function debounce( fn, threshold ) {
          var timeout;
          threshold = threshold || 100;
          return function debounced() {
              clearTimeout( timeout );
              var args = arguments;
              var _this = this;
              function delayed() {
                  fn.apply( _this, args );
              }
              timeout = setTimeout( delayed, threshold );
          };
      }
  });
  
  $('.directory_search input[type="search"]').keyup(function() {
      $('.directory_search_reset').show();
  });
  </code></pre>
  
  <p>===========================================================================</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Finally figured out how to accomplish what I was seeking.  Here is the code below:</p>
  
  <pre><code>var qsRegex;
  var buttonFilter;
  // init Isotope
  var $grid = $('.directory').isotope({
      itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
      layoutMode: 'fitRows',
      filter: function() {
          var $this = $(this);
          var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
          var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
          return searchResult &amp;&amp; buttonResult;
      }
  });
  $('.directory_menu ul').on( 'click', 'li', function() {
      buttonFilter = $( this ).attr('data-filter');
      $grid.isotope();
  });
  // use value of search field to filter
  var $quicksearch = $('.quicksearch').keyup( debounce( function() {
      qsRegex = new RegExp( $quicksearch.val(), 'gi' );
      $grid.isotope();
  }));
  // change active class on buttons
  $('.directory_menu ul').each( function( i, buttonGroup ) {
      var $buttonGroup = $( buttonGroup );
      $buttonGroup.on( 'click', 'li', function() {
          $buttonGroup.find('.active').removeClass('active');
          $( this ).addClass('active');
      });
  });
  // debounce so filtering doesn't happen every millisecond
  function debounce( fn, threshold ) {
      var timeout;
      threshold = threshold || 100;
      return function debounced() {
          clearTimeout( timeout );
          var args = arguments;
          var _this = this;
          function delayed() {
              fn.apply( _this, args );
          }
          timeout = setTimeout( delayed, threshold );
      };
  }
  
  // RESETTING
  $('.directory_search_reset').on('click', function() {
      //hide reset button
      $('.directory_search_reset').hide();
      //clear search field
      $('.directory_search input[type="search"]').val('');
      var qsRegex;
      var buttonFilter;
      // init Isotope
      var $grid = $('.directory').isotope({
          itemSelector: '.listing, .listing_title, .listing_notice', // IMPORTANT CLASSES HERE -- '.listing = container for website link', '.listing_title = container for website link title', '.listing_notice = Notice to inform there is no website under this category'
          layoutMode: 'fitRows',
          filter: function() {
              var $this = $(this);
              var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
              var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
              return searchResult &amp;&amp; buttonResult;
          }
      });
      $('.directory_menu ul').on( 'click', 'li', function() {
          buttonFilter = $( this ).attr('data-filter');
          $grid.isotope();
      });
      // use value of search field to filter
      var $quicksearch = $('.quicksearch').keyup( debounce( function() {
          qsRegex = new RegExp( $quicksearch.val(), 'gi' );
          $grid.isotope();
      }));
      // change active class on buttons
      $('.directory_menu ul').each( function( i, buttonGroup ) {
          var $buttonGroup = $( buttonGroup );
          $buttonGroup.on( 'click', 'li', function() {
              $buttonGroup.find('.active').removeClass('active');
              $( this ).addClass('active');
          });
      });
      // debounce so filtering doesn't happen every millisecond
      function debounce( fn, threshold ) {
          var timeout;
          threshold = threshold || 100;
          return function debounced() {
              clearTimeout( timeout );
              var args = arguments;
              var _this = this;
              function delayed() {
                  fn.apply( _this, args );
              }
              timeout = setTimeout( delayed, threshold );
          };
      }
      **$('li').removeClass('active'); //ADDED
      $('li:first-of-type').addClass('active'); //ADDED**
  });
  //show reset icon once input field has been typed in
  $('.directory_search input[type="search"]').keyup(function() {
      $('.directory_search_reset').show();
  });
  </code></pre>
  
  <p><strong>Now my question is this: Is there a way to shorten all this code up?  Right now, I've duplicated most of everything as it was needed to make things work under the  <code>.directory_search_reset</code> function...but I feel like there should be a way to shorten all this up.  Is this possible?</strong></p>