同位素搜索無法在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內容上工作

回答

相關問題