Question

我正在使用过滤器和搜索框，两者都使用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>

Answer 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');
    });
  });

});

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

1 个答案: