JQuery изотопный фильтр с выбором и поиском по ключевым словам не работают вместе - PullRequest
Новая
       13

JQuery изотопный фильтр с выбором и поиском по ключевым словам не работают вместе

0 голосов
/ 15 января 2019

Я пытаюсь отфильтровать мою галерею изотопной библиотекой. У меня есть список кнопок, который отлично работает в одиночку, и текстовое поле, которое отлично работает в одиночку. Я пытаюсь объединить их с фильтрами, но пока не повезло. 

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

Я хочу, чтобы они работали вместе. Как:

Когда я пишу слово, оно должно фильтровать его, если есть выбор из другого фильтра.

Или когда я фильтрую свой фильтр по категориям, он должен фильтровать его, в том числе, если есть какие-либо ключевые слова.

1 Ответ

0 голосов
/ 15 января 2019

Я решил это так, на всякий случай: 

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