isotope with search and filters button

example-with-search-and-filters-button.js

// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
  var timeout;
  return function debounced() {
    if ( timeout ) {
      clearTimeout( timeout );
    }
    function delayed() {
      fn();
      timeout = null;
    }
    setTimeout( delayed, threshold || 100 );
  }
}

 var $container = $('#catalog').isotope({
    itemSelector: '.item',
    layoutMode: 'fitRows'
  });

 var quickSearch = $('#quicksearch');

  // filter functions
  var filterFns = {
    // show if name ends with -ium
    productName: function() {
      // Pega o valor do campo
      var qsRegex = new RegExp( quickSearch.val(), 'gi' );

      // Procura todos os títulos de produtos
      var productName = $(this).find('.product-name').text();

      //Verifica se existe
      return qsRegex ? productName.match(qsRegex) : true;
    }
  };

  // bind filter button click
  $('#filters').on( 'click', 'button', function() {
    var filterValue = $( this ).attr('data-filter');
    $container.isotope({ filter: filterValue });
  });

  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });

  quickSearch.on('keyup change', function(){
    debounce(searchFilter());
  });

  function searchFilter() {
    var filterValue = quickSearch.attr('data-filter');
    filterValue = filterFns[ filterValue ] || filterValue;
    $container.isotope({ filter: filterValue });
  }