过滤器+搜索与同位素打破搜索

Filters + Search with Isotopes Breaks Search?

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

我正在使用同位素(v1)，并在钢笔中创建了一个示例搜索字段。

最初它工作，但是，如果我过滤同位素库，然后搜索字段停止工作。

我相信搜索功能仍然运行只是不过滤画廊，我不确定如何解决这个问题。事实上，我不确定确切的问题是什么，因为没有抛出错误。

这是一个带有工作示例的小提琴。

这是搜索，过滤和同位素JavaScript:

var $container = $('.isotope'),
    qsRegex,
    filters = {};
$container.isotope({
  itemSelector : '.element',
  masonry : {
    columnWidth : 120
  },
  getSortData : {
    name : function ( $elem ) {
      return $elem.find('.name').text();
    }
  },
filter: function() {
  return qsRegex ? $(this).text().match( qsRegex ) : true;
}
});
function searchFilter() {
  qsRegex = new RegExp( $quicksearch.val(), 'gi' );
  $container.isotope();
}
// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup( debounce( searchFilter ) );
$('#reset').on( 'click', function() {
  $quicksearch.val('');
  searchFilter()
});
    
     // store filter for each group
    
    
    $('#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');
      // combine filters
      var filterValue = '';
      for ( var prop in filters ) {
        filterValue += filters[ prop ];
      }
      // set filter for Isotope
      $container.isotope({ filter: filterValue });
        
    });
    
    // 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 );
    }
    }

如何解决这个问题?

注意:我使用jQuery 2.1.1.

在你的例子中，$('#filters').on('click', '.button', function ()停止搜索功能，你重置按钮放置在#filtersdiv内，所以当你点击它时，搜索引擎也停止了。

我没有最好的解决方案，但它解决了一些问题:

使用函数回调引擎的想法:

var iso = function() {
//engine here
}

和

$(function () {
   iso();
   $('.iso').click(function(){
      setTimeout(iso, 500);
});
});

如果没有setTimeout，它将无法工作。

但这并不能解决主要问题

看看FIDDLE，你就会明白我的意思了

或者你可以在#filtersdiv

之外放置reset和Show All按钮

我在实现过滤器+搜索功能时遇到了同样的问题。

我解决了这个问题，将过滤函数传递给搜索函数(function searchFilter(){...})中的同位素调用($container.isotope();)，而不是在初始化同位素实例时。

所以，在你的代码中，它应该是这样的: 
// No filter specified when initializing the Isotope instance
$container.isotope({
  itemSelector : '.element',
  masonry : {
    columnWidth : 120
  },
  getSortData : {
    name : function ( $elem ) {
      return $elem.find('.name').text();
    }
  }
});

// Instead, the filter is specified here
function searchFilter() {
  qsRegex = new RegExp( $quicksearch.val(), 'gi' );
  $container.isotope({
    filter: function() {
     return qsRegex ? $(this).text().match( qsRegex ) : true;
    }
  });
}
相关文章：