Isotope.js - 结合搜索字段和过滤器组

Question

我尝试将搜索字段和两个过滤器组与isotope.js结合使用此codpen https://codepen.io/desandro/pen/mCdbD

现在组合工作，直到我尝试清除一个过滤器。点击其中一个＆gt;数据过滤器值=＆＃34;＆＃34; ＆LT;链接重置两个过滤器组。

尝试实施＆gt; data-filter-group＆lt;像这里解释的http://isotope.metafizzy.co/filtering.html#combination-filters排除了搜索字段。我怎样才能解决这个问题？我非常感谢您提供的任何帮助。

html代码：

    <!-- start quicksearch -->

<p><input type="text" id="quicksearch" placeholder="Search" /></p>

<!-- end quicksearch -->

<!-- start desktop isotope filter -->

<div class="visible-desktop">
<div class="btn-group clearfix">

<!-- start category btn --> 

    <div class="btn-group categorylist pull-left">
        <ul class="filter option-set" data-filter-group="category">
            <li class="btn"><a href="#" data-filter-value="" class="selected"><i class="fa fa-th"></i></a></li>
            <li class="btn"><a href="#" data-filter-value=".Features">Features</a></li>
            <li class="btn"><a href="#" data-filter-value=".Blog">Blog</a></li>
            <li class="btn"><a href="#" data-filter-value=".Uncategorised">Uncategorised</a></li>
        </ul>
    </div>

<!-- end category btn -->   

<!-- start tag btn -->

    <div class="btn-group pull-middle">
        <ul class="filter option-set" data-filter-group="tag">
            <li class="btn"><a href="#" data-filter-value="" class="selected"><i class="fa fa-th"></i></a></li>
            <li class="btn"><a href="#" data-filter-value=".TOP" >TOP</a></li>
            <li class="btn"><a href="#" data-filter-value=".Dummy" >Dummy</a></li>
            <li class="btn"><a href="#" data-filter-value=".templates" >templates</a></li>
        </ul>
    </div>

<!-- end tag btn -->

</div>
</div>

<!-- end desktop isotope filter -->

js code：

jQuery(function(){

// quick search regex
var qsRegex;
var optionFilter;

// init Isotope
var $container = jQuery('#isotope-container'),
        filters = {};

$container.imagesLoaded( function() {
$container.isotope({
    itemSelector: '.portfolio-item',
    masonry: {
        columnWidth: '.portfolio-sizer',
        gutter: '.gutter-sizer',
        percentPosition: true
    },
    filter: function() {
        var $this = $(this);
        var searchResult = qsRegex ? jQuery(this).text().match( qsRegex ) : true;
        var optionResult = optionFilter ? jQuery(this).is( optionFilter ) : true;
        return searchResult && optionResult;
    }
});
});

jQuery('.filter a').click(function() {
    optionFilter = jQuery( this ).attr('data-filter-value');
    $container.isotope();
});

// use value of search field to filter
var $quicksearch = jQuery('#quicksearch').keyup( debounce( function() {
    qsRegex = new RegExp( $quicksearch.val(), 'gi' );
    $container.isotope();
}) );

// change selected class on filter
jQuery('.option-set').each( function( i, optionSet ) {
    var $optionSet = jQuery( optionSet );
    $optionSet.on( 'click', 'a', function() {
        $optionSet.find('.selected').removeClass('selected');
        $( this ).addClass('selected');
    });
});

});

// 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 );
    };
}