jQuery Isotope可搜索圖庫

我有一個同位素圖庫，我想添加一個實時搜索功能，這意味着當人類輸入一個單詞時，圖庫將開始自動過濾。jQuery Isotope可搜索圖庫

1）這是可能的同位素？

2）如果是這樣，我該怎麼做？

注意：我已經搜索過，但沒有在網上找到任何東西。

以下是在我的畫廊一個項目看起來像：

<div class="element hybrid numbers-filter" data-category="hybrid"> 
    <p class="type">H</p> 
    <h2 class="name">303</h2> 
    <p class="strain-info">No Info Available</p> 
    <p class="review"><a class="fancy_button review-form-lb" href="#review-form-lightbox"><span style="background-color: #000;">Review Strain</span></a></p> 
</div>

來源

2013-11-05 L84

在閱讀關於同位素2時，有一個Code Pen這個確切的功能！

這裏是使得其在事件工作上面的代碼鏈接中斷：

注：這不是我的代碼，但代碼示例。

HTML

<input type="text" id="quicksearch" placeholder="Search" /> 
<div class="isotope"> 
    <!-- ISOTOPE CONTENT HERE --> 
</div>

$(function() { 
// quick search regex 
var qsRegex; 

// init Isotope 
var $container = $('.isotope').isotope({ 
    itemSelector: '.element-item', 
    layoutMode: 'fitRows', 
    filter: function() { 
    return qsRegex ? $(this).text().match(qsRegex) : true; 
    } 
}); 

// use value of search field to filter 
var $quicksearch = $('#quicksearch').keyup(debounce(function() { 
    qsRegex = new RegExp($quicksearch.val(), 'gi'); 
    $container.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); 
} 
}

來源

2014-05-16 03:01:26 L84

它似乎並不具有什麼特別內置了用於這一目的，但由於filter功能似乎讓任何一種選擇的jQuery支持，你可以使用:contains選擇器來構建。

E.g.

$('#container').isotope({ filter: ':contains("search text")' });

來源

2013-11-05 03:25:46 plalx

jQuery Isotope可搜索圖庫

回答

相關問題