同位素：多个复选框和搜索框的组合过滤

Question

我正在尝试将同位素多个复选框过滤与搜索框结合在一起。我将示例与here中的复选框过滤器一起使用，并尝试实现搜索框，但是没有运气。只是复选框过滤效果良好。我认为我已经接近解决方案了，但是我的JavaScript技能还处于初学者水平。

我评论了我尝试实现的部分。

谢谢您的提示

// quick search regex
var qsRegex;
var $grid;
var filters = {};
var $grid = $('.grid');

 //set initial options
$grid.isotope({
    layoutMode: 'fitRows'
});

$(function() {

    $grid = $('#grid');

    $grid.isotope();
    // do stuff when checkbox change
    $('#options').on('change', function(jQEvent) {
        var $checkbox = $(jQEvent.target);

        manageCheckbox($checkbox);
        var comboFilter = getComboFilter(filters);

        /*var searchResult = qsRegex ? $(this).text().match(qsRegex) : true;
        var filterResult = function() {
                return comboFilter && searchResult;
            }*/

        $grid.isotope({
                filter: comboFilter                         //or filterResult
        });
    });
});

function getComboFilter(filters) {

    var i = 0;
    var comboFilters = [];
    var message = [];
    for (var prop in filters) {
        message.push(filters[prop].join(' '));
        var filterGroup = filters[prop];
        // skip to next filter group if it doesn't have any values
        if (!filterGroup.length) {
            continue;
        }
        if (i === 0) {
            // copy to new array
            comboFilters = filterGroup.slice(0);
        } else {
            var filterSelectors = [];
            // copy to fresh array
            var groupCombo = comboFilters.slice(0); // [ A, B ]
            // merge filter Groups
            for (var k = 0, len3 = filterGroup.length; k < len3; k++) {
                for (var j = 0, len2 = groupCombo.length; j < len2; j++) {
                    filterSelectors.push(groupCombo[j] + filterGroup[k]); // [ 1, 2 ]
                }

            }
            // apply filter selectors to combo filters for next group
            comboFilters = filterSelectors;
        }
        i++;
    }

    var comboFilter = comboFilters.join(', ');

    return comboFilter;
}

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


// debounce so filtering doesn't happen every millisecond
function debounce(fn, threshold) {
    var timeout;
    threshold = threshold || 100;
    return function debounced() {
        clearTimeout(timeout);
        var args = arguments;
        var _this = this;

        function delayed() {
            fn.apply(_this, args);
        }
        timeout = setTimeout(delayed, threshold);
    }
}




function manageCheckbox($checkbox) {
    var checkbox = $checkbox[0];

    var group = $checkbox.parents('.option-set').attr('data-group');
    // create array for filter group, if not there yet
    var filterGroup = filters[group];
    if (!filterGroup) {
        filterGroup = filters[group] = [];
    }

    var isAll = $checkbox.hasClass('all');
    // reset filter group if the all box was checked
    if (isAll) {
        delete filters[group];
        if (!checkbox.checked) {
            checkbox.checked = 'checked';
        }
    }
    // index of
    var index = $.inArray(checkbox.value, filterGroup);

    if (checkbox.checked) {
        var selector = isAll ? 'input' : 'input.all';
        $checkbox.siblings(selector).prop('checked', false);


        if (!isAll && index === -1) {
            // add filter to group
            filters[group].push(checkbox.value);
        }

    } else if (!isAll) {
        // remove filter from group
        filters[group].splice(index, 1);
        // if unchecked the last box, check the all
        if (!$checkbox.siblings('[checked]').length) {
            $checkbox.parents('.option-set').find(selector).prop('checked', false);
        }
    }

Answer 1

我自己找到了解决方案，但是我不得不添加第二个函数来返回搜索结果。否则，仅在使用复选框或离开搜索框输入字段后才触发搜索功能。我如何避免此冗余代码？

JS：

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

$(function() {

    $grid = $('#grid');

    $grid.isotope({
    filter: function() {
                var searchResult = qsRegex ? $(this).text().match(qsRegex) : true;
                return searchResult;
    }
    });

    // do stuff when checkbox change
    $('#options').on('change', function(jQEvent) {
        var $checkbox = $(jQEvent.target);

        manageCheckbox($checkbox);
        var comboFilter = getComboFilter(filters);

        $grid.isotope({

            filter: function() {
                var buttonResult = comboFilter ? $(this).is(comboFilter) : true;
                var searchResult = qsRegex ? $(this).text().match(qsRegex) : true;

                return buttonResult && searchResult;
            }
        });
    });
});