在同一页面上使用同位素过滤器和搜索框答案

【问题标题】：filters and searchbox using isotope on same page在同一页面上使用同位素过滤器和搜索框
【发布时间】：2015-11-24 14:12:40
【问题描述】：

我正在使用过滤器和搜索框，两者都使用 isotope.js。过滤器和搜索独立工作正常，但是当我在使用过滤器后尝试搜索时，搜索不起作用。两者都有一个同位素实例也无济于事。请给我一些我可以尝试的建议。以下是这两个脚本的代码：

<script type="text/javascript"> 
   $( function() {
   // init Isotope
   var $grid = $('.grid').isotope({
   itemSelector: '.grid-item',
   layoutMode: 'fitRows'
});

$('.filter').click(function() {
$('#loadMore').hide();
//alert("inside isotope script");
var filterValue = $( this ).attr('data-filter');
//alert(filterValue);
$grid.isotope({ filter: filterValue});
});
});
</script>

<!-- Script for search --> 
<script type="text/javascript"> 
 $( function() {
// quick search regex
var qsRegex;
// init Isotope

var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'fitRows',
filter: function() {
  return qsRegex ? $(this).text().match( qsRegex ) : true;
}
});

// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
$('#loadMore').hide();
//alert("key up");
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
//alert(qsRegex);
$grid.isotope();
}, 200 ) );

 });

// 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;
  }
  timeout = setTimeout( delayed, threshold || 100 );
  }
}
 </script>

【问题讨论】：

标签： jquery-isotope

【解决方案1】：

几天前我遇到了类似的问题 :) 试试这个 Desandro 的 codepen http://codepen.io/desandro/pen/1f0c676d32473ccf8b6d053c07aa9ba6/ 您可以将过滤器与函数结合使用...

    $( function() {

  // filter functions
  var filterFns = {
    greaterThan50: function() {
      var number = $(this).find('.number').text();
      return parseInt( number, 10 ) > 50;
    },
    even: function() {
      var number = $(this).find('.number').text();
      return parseInt( number, 10 ) % 2 === 0;
    }
  };

  // store filter for each group
  var filters = {
    greaterThan50: 'greaterThan50'
  };

  // init Isotope
  var $container = $('.isotope').isotope({
    itemSelector: '.color-shape',
    filter: function() {
      var isMatched = true;
      var $this = $(this);

      for ( var prop in filters ) {
        var filter = filters[ prop ];
        // use function if it matches
        filter = filterFns[ filter ] || filter;
        // test each filter
        if ( filter ) {
          isMatched = isMatched && $(this).is( filter );
        }
        // break if not matched
        if ( !isMatched ) {
          break;
        }
      }
      return isMatched;
    }
  });

  $('#filters').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // arrange, and use filter fn
    $container.isotope('arrange');
  });

  // change is-checked class on buttons
  $('.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');
    });
  });

});

【讨论】：