Question

我正在Ajax加载列表项目上使用Isotope创建搜索功能。

通过遵循Isotope文档和示例，我创建了以下脚本 -

<script type="text/javascript">
var grid = null;

jQuery(function($) {

var qsRegex;

Isotope.Item.prototype._create = function() {
  // assign id, used for original-order sorting
  this.id = this.layout.itemGUID++;
  // transition objects
  this._transn = {
    ingProperties: {},
    clean: {},
    onEnd: {}
  };
  this.sortData = {};
};

Isotope.Item.prototype.layoutPosition = function() {
  this.emitEvent( 'layout', [ this ] );
};

Isotope.prototype.arrange = function( opts ) {
  // set any options pass
  this.option( opts );
  this._getIsInstant();
  // just filter
  this.filteredItems = this._filter( this.items );
  // flag for initalized
  this._isLayoutInited = true;
};

// layout mode that does not position items
Isotope.LayoutMode.create('none');

// --------------- //

// init Isotope
grid = $('.grid').isotope({
  itemSelector: '.element-item',
  layoutMode: 'none',
  filter: function() {
    var $this = $(this);
    var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
    //var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
    return searchResult;
    //return searchResult && buttonResult;
  }
});

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

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

默认情况下它按预期工作，我在每次Ajax调用后调用ajax重新加载（同位素）项后添加了以下行 -

grid.isotope('reloadItems');

它也有效。之后，我尝试使用下面的代码根据搜索值重新过滤项目，但不起作用。

grid.isotope( 'appended', '.element-item' );

在Ajax通话后，项目不会根据搜索值进行更新。比方说，我用“约克”搜索，然后用“约克”过滤现有的项目。但是在使用Ajax加载更多项目之后，除了我在搜索字段上再次添加或删除任何值之外，它不会过滤新项目。

我错过了什么？感谢您的帮助。

Answer 1

尝试破坏并重新初始化同位素：

grid.isotope('destroy');
grid = $('.grid').isotope({....})

同位素搜索不能处理Ajax内容

1 个答案: