mercredi 3 juin 2020

Isotope: Combined multiple checkbox and searchbox filtering

I'm trying to combine the Isotope multiple checkbox filtering with a searchbox. I used the example with the checkbox filters from here and tried to implement the searchbox but with no luck. Just the checkbox filtering works well. I think i'm close to the solution but my javascript skills are at a very beginner level.

I commented out the section of what i've tried to implement.

Thank you for some hints

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



Aucun commentaire:

Enregistrer un commentaire