jQuery 带选择和关键字搜索的同位素过滤器不能一起工作

Question

我正在尝试使用同位素库过滤我的画廊。我有一个单独使用的按钮列表，以及一个单独使用的文本框。我正在尝试将这些组合到过滤器中，但现在运气不好。

var qsRegex;
var selector = '*';

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

$(window).load(function () {
    var $container = $('.portfolioContainer');

    $container.isotope({
        filter: function () {
            return qsRegex ? $(this).text().match(qsRegex) && selector : selector;
        },
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    var $quicksearch = $('#tbSearchBusiness').keyup(debounce(function () {
        qsRegex = new RegExp($quicksearch.val(), 'gi');
        $container.isotope();
    }, 200));

    $('.portfolioFilter a').click(function () {
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current');

        selector = $(this).attr('data-filter');

        $container.isotope();
        return false;
    });
});

我希望他们一起工作。喜欢：

当我写一个词时，它应该过滤它，如果有其他过滤器的选择。

或者当我用我的类别过滤器过滤时，如果有任何关键字写入，它应该过滤它。

Answer 1

我是这样解决的，以防万一有人需要：

var qsRegex;
var selector = '*';

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

$(window).load(function () {
    var $container = $('.portfolioContainer');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    var $quicksearch = $('#tbSearchBusiness').keyup(debounce(function () {
        qsRegex = $quicksearch.val().length > 0 ? new RegExp($quicksearch.val(), 'gi') : null;

        var filterFns = {
            kSearch: function () {
                return qsRegex ? $(this).text().match(qsRegex) : true;
            }
        };

        var filterValue = selector;

        filterValue = qsRegex ? filterFns['kSearch'] || filterValue : filterValue;

        $container.isotope({
            filter: filterValue,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

    }, 200));

    $('.portfolioFilter a').click(function () {
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current');

        selector = $(this).attr('data-filter');

        var filterFns = {
            kSearch: function () {
                return qsRegex ? $(this).text().match(qsRegex) : true;
            }
        };

        var filterValue = selector;

        filterValue = qsRegex ? filterFns['kSearch'] || filterValue : filterValue;

        $container.isotope({
            filter: filterValue,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

        return false;
    });
});

jQuery 带选择和关键字搜索的同位素过滤器不能一起工作

jQuery isotope filter with selection and keyword search not working together

jquery

jquery-isotope