jQuery同位素可搜索库

jQuery Isotope Searchable Gallery

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

我有一个同位素库，我想添加一个实时搜索功能，这意味着当一个人键入一个单词时，库将开始自动筛选。

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>

它似乎没有专门为此而内置的东西，但是由于filter函数似乎允许jQuery支持的任何类型的选择器，因此可以使用:contains选择器围绕它构建一些东西。

例如

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

在阅读关于同位素2的文章时，有一支具有此功能的代码笔！

以下是在上面的链接关闭的情况下使其工作的代码：

注意：这不是我的代码，而是代码示例。

HTML 

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

JS

$( 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 );
}
}
相关文章：