过滤器+使用同位素搜索中断搜索? [英] Filters + Search with Isotopes Breaks Search?
问题描述
我正在使用同位素(v1)并在笔中的示例。
I am using Isotopes (v1) and have created a search field following an example in a Pen.
但是,如果我过滤同位素库,则搜索字段会停止工作。
Initially it works, however, if I filter the Isotope gallery then the search field stops working.
我认为搜索功能仍然运行只是不过滤库,我不确定如何解决问题。事实上,我不确定究竟是什么问题,因为没有错误被抛出。
I believe the search function still runs just doesn't filter the gallery and I am unsure how to fix the problem. In fact I am unsure what the exact problem is as no errors are thrown.
这是一个小提琴,带有一个工作示例。
Here is a Fiddle with a working example.
这是搜索,过滤器和同位素JavaScript:
Here is the search, filter and isotope JavaScript:
var $container = $('.isotope'),
qsRegex,
filters = {};
$container.isotope({
itemSelector : '.element',
masonry : {
columnWidth : 120
},
getSortData : {
name : function ( $elem ) {
return $elem.find('.name').text();
}
},
filter: function() {
return qsRegex ? $(this).text().match( qsRegex ) : true;
}
});
function searchFilter() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$container.isotope();
}
// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup( debounce( searchFilter ) );
$('#reset').on( 'click', function() {
$quicksearch.val('');
searchFilter()
});
// store filter for each group
$('#filters').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// combine filters
var filterValue = '';
for ( var prop in filters ) {
filterValue += filters[ prop ];
}
// set filter for Isotope
$container.isotope({ filter: filterValue });
});
// 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 );
}
}
如何解决问题?
注意:我使用的是jQuery 2.1.1。
Note: I am using jQuery 2.1.1.
推荐答案
在你的例子中 $('#filters')。on('click','.button',function()
停止搜索功能,你重置buton放在#filters div里面,所以当你点击它搜索引擎也是停止的。
In you example $('#filters').on('click', '.button', function ()
stoping the search function and you reset buton placed inside #filters div so when you click it search engine is stoped too.
我没有最好的解决方案,但它解决了一些问题:
I have not the best solution, but it solve some problems:
使用函数调用引擎的想法:
Idea in using function to call engine back:
var iso = function() {
//engine here
}
和
$(function () {
iso();
$('.iso').click(function(){
setTimeout(iso, 500);
});
});
没有setTimeout它无法工作。
without setTimeout it can't work.
但它没有解决主要问题
look at FIDDLE and you'll understand what I mean
或者你可以在#filters div
Or you just can place reset and Show All buttons outside #filters div
这篇关于过滤器+使用同位素搜索中断搜索?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!