How to customise multi filtering with 'mixitup' plugin?

Question

I'm using the jQuery plugin MixItUp to get some filtering on a list of content I have.

The plugin offers a multiFilter out of the box, but the problem is that it has everything showing, and then when you click one of the filters, it removes it from the list, whereas I want it so that when you select one of the filters, it only shows that one. If you click another, it also shows content for that. There's a demo that has something similar to what I want, but it's more complex than I need - it has two categories for filters, I just need one.

In the demo, they don't use the 'multiFilter' option. Instead, they seem define the string for the 'filter' option and then spit that out depending on what filter has been clicked. I did try deconstructing what they had done and reworking it how I wanted, but failed to really get anywhere.

Basically I'm lost, so hoping someone has played with this plugin before. I just want a kick in the right direction. Do I need to write a custom click function and forget using the multiFilter, trying to set the filter string, or can the default multiFilter be customised?

There's a fiddle here with the plugin js added and the default multiFilter functionality

HTML

<div id="filter">
    <span>Filter</span>
    <ul class="filter-list">
        <li data-filter="all" class="filter active"><a href="#">All</a></li>
        <li data-filter="lemon" class="filter"><a href="#">Lemon</a></li>
        <li data-filter="orange" class="filter"><a href="#">Orange</a></li>
        <li data-filter="apple" class="filter"><a href="#">Apple</a></li>
    </ul>
</div>

<ul id="grid">
    <li class="mix lemon">
        <h3>Lemon</h3>
        <p>Some text here</p>
    </li>
    <li class="mix orange">
        <h3>Orange</h3>
        <p>Some text here</p>
    </li>
    <li class="mix apple">
        <h3>Apple</h3>
        <p>Some text here</p>
    </li>
</ul>

JS

$('#grid').mixitup({
    multiFilter: 'true',
    showOnLoad: 'lemon orange apple'
});

Answer 1

I ended up going through the script from the National Parks demo and tweaking it until I got what I wanted.

My script ended up like this, in case anyone else wants this.

$(function () {

    // INSTANTIATE MIXITUP

    $('#grid').mixitup({
        effects: ['fade', 'blur']
    });

    // HANDLE MULTI-DIMENSIONAL CHECKBOX FILTERING

    var $filters = $('#filters').find('li');
    var filterString = 'all';

    // Bind checkbox click handlers:

    $filters.on('click', function () {
        var $t = $(this),
        filter = $t.attr('data-filter');

        if (filter == 'all') {
            // If "all"
            if (!$t.hasClass('active')) {
                // if unchecked, check "all" and uncheck all other active filters
                $t.addClass('active').siblings().removeClass('active');
                // Replace entire string with "all"
                filterString = 'all';
            }
        } else {
            // Else, uncheck "all"
            $t.siblings('[data-filter="all"]').removeClass('active');
            // Remove "all" from string
            filterString = filterString.replace('all', '');

            if (!$t.hasClass('active')) {
                // Check checkbox
                $t.addClass('active');
                // Append filter to string
                filterString = filterString == '' ? filter : filterString + ' ' + filter;
            } else {
                // Uncheck
                $t.removeClass('active');
                // Remove filter and preceeding space from string with RegEx
                var re = new RegExp('(\\s|^)' + filter);
                filterString = filterString.replace(re, '');
            };
        };

        // Reset to all if none are active
        if ($filters.filter('.active').size() == 0) {
            $filters.filter('[data-filter="all"]').addClass('active');
            filterString = 'all';
        }

        $('#grid').mixitup('filter', [filterString])
    });

});

Answer 2

Have you tried setting the option "FilterLogic" to "and"?

http://mixitup.io/#FilterLogic