同位素搜索无法在Ajax内容上工作

我在我的Ajax加载列表项目上使用Isotope创建搜索功能。同位素搜索无法在Ajax内容上工作

通过以下同位素的文档和例子，我在下面脚本 -

<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加载更多项目之后，它不会过滤新项目，除非我再次在搜索字段上添加或删除任何值。

我错过了什么？你的帮助表示赞赏

来源

2017-08-10 Raiyan

试图摧毁并重新初始化同位素：

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

来源

2017-08-10 11:46:23 madalinivascu

不工作，未捕获的类型错误：在代码的第一或第二线无法读取空 – Raiyan

的特性“同位素”？ – madalinivascu

我尝试在'grid.isotope（'reloadItems'）;'以及'grid = $（'。grid'）之前的回复中添加同位素（{....}）' – Raiyan

同位素搜索无法在Ajax内容上工作

回答

相关问题