Question

我尝试创建一个页面，让您搜索类别，并在页面加载时以特定类别开始。

开始使用此codepen： http://codepen.io/desandro/pen/mCdbD

现在我有了这个：http://codepen.io/anon/pen/MaYeMR

我已经想出了如何在页面加载时加载这样的特定类别，方法是添加如下默认过滤器：

    filter: '.transition'

还想出了如何使用如下按钮对类别进行排序：

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

这很好用，但搜索功能似乎被打破了。每当我尝试在搜索字段中搜索某些内容时，都不会显示任何结果。我认为这与比较这部分的搜索值有关：

  // use value of search field to filter
  var $quicksearch = $('#quicksearch').keyup( debounce( function() {
    qsRegex = new RegExp( $quicksearch.val(), 'gi' );
    $container.isotope({ filter: qsRegex });

整个javascript：

$( function() {
  // quick search regex
  var qsRegex;
  var buttonFilter;

  // init Isotope
  var $container = $('.isotope').isotope({
    itemSelector: '.element-item',
    layoutMode: 'fitRows',
    filter: '.transition'
  });

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

  // use value of search field to filter
  var $quicksearch = $('#quicksearch').keyup( debounce( function() {
    qsRegex = new RegExp( $quicksearch.val(), 'gi' );
    $container.isotope({ filter: qsRegex });
  }) );


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


});

// 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 );
  };
}

我在这里的第一个问题，所以我希望它不会太模糊，试图解释我采取的步骤以及我认为它出错的地方。将搜索功能与初始过滤器相结合，我无法找到任何相关问题。

Answer 1

我对Isotope一无所知，但是从审查您的代码与原始代码相比，对于您想要做的更好的方法似乎是将过滤器功能与原始代码保持一致并触发它适当。

为了对初始过滤器执行此操作，我将此代码添加到初始化函数的底部：

// "click" the button of the initial filter
var initialFilter = '.transition';
if (initialFilter) {
    $('#filters .button[data-filter="' + initialFilter + '"]')
        .trigger('click');
}

您没有指定初始化过滤器的方式，因此initialFilter变量仅用于模拟初始过滤器规范。

这里是原始代码分叉的完整代码：http://codepen.io/anon/pen/WQboyG

同位素将搜索和按钮与初始过滤器结合使用

1 个答案: