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

Isotope combine search and buttons with initial filter

本文关键字：过滤器 按钮 结合 搜索 同位素      更新时间：2023-09-26

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

以这个代码开头: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 );
  };
}

我的第一个问题，所以我希望它不是太模糊，试着解释我采取了什么步骤，我认为哪里出了问题。我没有发现将搜索功能与初始过滤器相结合有任何相关问题。

我对同位素一无所知，但从审查您的代码与原始代码相比，似乎更好的方法是将过滤函数从原始代码中保留并适当地触发它。

为了对初始过滤器执行此操作，我将以下代码添加到初始化函数的底部: 
// "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

相关文章：