我在codepen上有一个代码,用于过滤同位素网格,也适用于同位素网格中的搜索。
过滤器由复选框和逻辑组成,因此某些复选框无法同时激活(男/女)。但是,这并不重要......
过滤器正在运行。 搜索字段有效(不幸的是,只有在我第一次没有激活过滤器时)
第一个愿望: 我想将过滤器和搜索与AND逻辑结合起来。 例如,当我在搜索框'martin'中插入时,搜索结果为'gruber martin','hofer martin','maier martina'。还行吧。 然后,当我也激活'女性',那么我只会留下'maier martina'(搜索=马丁和过滤器=女性)
但是我的代码在这种情况下不记得搜索只有过滤器: - (
第二个愿望:搜索字段应始终有效,不仅在没有过滤器处于活动状态时。
如果有人可以帮助我,那就太棒了。
谢谢..
HTML:
<button id="shuffle">shuffle</button>
<div class="button-group filter-button-group">
<div class="btn">
<input name="male" value=".male" id="male" type="checkbox">
<label for="male">male</label>
</div>
<div class="btn">
<input name="female" value=".female" id="female" type="checkbox">
<label for="female">female</label>
</div>
<div class="btn">
<input name="de" value=".de" id="de" type="checkbox">
<label for="de">de</label>
</div>
<div class="btn">
<input name="it" value=".it" id="it" type="checkbox">
<label for="it">it</label>
</div>
<div class="btn">
<input name="en" value=".en" id="en" type="checkbox">
<label for="en">en</label>
</div>
<div class="btn">
<input name="has-website" value=".has-website" id="has-website" type="checkbox">
<label for="has-website">has-website</label>
</div>
</div>
<input class="quicksearch" placeholder="Search" type="text">
<div class="blog_wrapper isotope_wrapper myclass">
<div class="posts_group lm_wrapper masonry tiles col-6 isotope" style="position: relative; height: 10615.1px;">
<div class="post-item isotope-item de it male has-website" style="position: absolute; left: 0px; top: 0px;">
<div class="post-photo-wrapper scale-with-grid"> </div>
<div class="post-desc-wrapper">
<div class="post-desc">
<div class="post-head"></div>
<div class="post-title">
<h2 class="entry-title" itemprop="headline"><a href="#">gruber martin</a></h2>
</div>
<div class="post-excerpt"><span class="excerpt-hellip">Lorem ipsum […]</span></div>
</div>
</div>
</div>
<div class="post-item isotope-item de it female" style="position: absolute; left: 179px; top: 0px;">
<div class="post-photo-wrapper scale-with-grid"> </div>
<div class="post-desc-wrapper">
<div class="post-desc">
<div class="post-head"></div>
<div class="post-title">
<h2 class="entry-title" itemprop="headline"><a href="#">maier erna</a></h2>
</div>
<div class="post-excerpt"><span class="excerpt-hellip">dolor sit […]</span></div>
</div>
</div>
</div>
<div class="post-item isotope-item de it male" style="position: absolute; left: 359px; top: 0px;">
<div class="post-photo-wrapper scale-with-grid"> </div>
<div class="post-desc-wrapper">
<div class="post-desc">
<div class="post-head"></div>
<div class="post-title">
<h2 class="entry-title" itemprop="headline"><a href="#">hofer martin</a></h2>
</div>
<div class="post-excerpt"><span class="excerpt-hellip">No text […]</span></div>
</div>
</div>
</div>
<div class="post-item isotope-item de it male" style="position: absolute; left: 539px; top: 0px;">
<div class="post-photo-wrapper scale-with-grid"> </div>
<div class="post-desc-wrapper">
<div class="post-desc">
<div class="post-head"></div>
<div class="post-title">
<h2 class="entry-title" itemprop="headline"><a href="#">zwerger josef</a></h2>
</div>
<div class="post-excerpt"><span class="excerpt-hellip">Hello […]</span></div>
</div>
</div>
</div>
<div class="post-item isotope-item it female" style="position: absolute; left: 719px; top: 0px;">
<div class="post-photo-wrapper scale-with-grid"> </div>
<div class="post-desc-wrapper">
<div class="post-desc">
<div class="post-head"></div>
<div class="post-title">
<h2 class="entry-title" itemprop="headline"><a href="#">gruber susi</a></h2>
</div>
<div class="post-excerpt"><span class="excerpt-hellip">bla bla […]</span></div>
</div>
</div>
</div>
<div class="post-item isotope-item en female" style="position: absolute; left: 899px; top: 0px;">
<div class="post-photo-wrapper scale-with-grid"> </div>
<div class="post-desc-wrapper">
<div class="post-desc">
<div class="post-head"></div>
<div class="post-title">
<h2 class="entry-title" itemprop="headline"><a href="#">maier martina</a></h2>
</div>
<div class="post-excerpt"><span class="excerpt-hellip"> […]</span></div>
</div>
</div>
</div>
<div class="post-item isotope-item male" style="position: absolute; left: 0px; top: 10435px;">
<div class="post-photo-wrapper scale-with-grid"> </div>
<div class="post-desc-wrapper">
<div class="post-desc">
<div class="post-head"></div>
<div class="post-title">
<h2 class="entry-title" itemprop="headline"><a href="#">maxi john</a></h2>
</div>
<div class="post-excerpt"><span class="excerpt-hellip"> […]</span></div>
</div>
</div>
</div>
</div>
</div>
使用Javascript:
$('#male').click(function () {
$('#female').prop('checked', false);
});
$('#female').click(function () {
$('#male').prop('checked', false);
});
var grid=$('.isotope');
var filter=$('.filter-button-group input');
var qsRegex;
grid.isotope({
itemSelector: '.isotope-item',
filter: function() {
var searchResult = qsRegex ? $(this).text().match( qsRegex ) : true;
return searchResult;
}
});
// use value of search field to filter
var quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( quicksearch.val(), 'gi' );
grid.isotope();
}, 200 ) );
// 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;
}
timeout = setTimeout( delayed, threshold || 100 );
}
}
$('#shuffle').click(function(){
grid.isotope('shuffle');
});
filter.change(function(){
var filters = [];
filter.filter(':checked').each(function(){
filters.push( this.value );
});
// filters = filters.join(', '); OR
filters = filters.join(''); //AND
grid.isotope({ filter: filters });
});
请参阅:code on codepen
答案 0 :(得分:0)
我找到了解决方案:
$('#male').click(function () {
$('#female').prop('checked', false);
});
$('#female').click(function () {
$('#male').prop('checked', false);
});
var grid=$('.isotope');
var filter=$('.filter-button-group input');
var suche=$('.quicksearch');
var qsRegex;
var buttonFilter;
grid.isotope({
itemSelector: '.isotope-item',
filter: function() {
// console.log(searchResult);
var searchResult = qsRegex ? $(this).text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $(this).is( buttonFilter ) : true;
return searchResult && buttonResult;
}
});
// use value of search field to filter
var quicksearch = suche.keyup( debounce( function() {
qsRegex = new RegExp( quicksearch.val(), 'gi' );
grid.isotope();
}, 200 ) );
// 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;
}
timeout = setTimeout( delayed, threshold || 100 );
};
}
$('#shuffle').click(function(){
grid.isotope('shuffle');
});
filter.change(function(){
var filters = [];
filter.filter(':checked').each(function(){
filters.push( this.value );
});
//filters = filters.join(', '); //OR
filters = filters.join(''); //AND
buttonFilter = filters;
grid.isotope();
});
答案 1 :(得分:0)
与上述相同的例子,但来自de docs :) https://codepen.io/desandro/pen/mCdbD
// quick search regex
var qsRegex;
var buttonFilter;
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && buttonResult;
}
});
$('#filters').on( 'click', 'button', function() {
buttonFilter = $( this ).attr('data-filter');
$grid.isotope();
});
// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}) );
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
// 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 );
};
}