Trouble integrating a select box into MixItUp JS

Several years ago I made a site incorporating MixItUp JS into a content filter section. I've recently been asked to integrate a selection box into the filter, but I'm having an issue getting the script to make use of both input and selection box. I can craft a script that will filter on one or the other, and I can make one that will work with two selection boxes, but I'm afraid I'm still relatively new to JS and I can't seem to modify the script to honor an input box and a selection box.

The desired behavior would be such that the input value would be used to filter on the title (as it currently does) and the selection box could be used to filter on the tags in the same instance.

The original script I am using was modified from an example on a blog but I was unable to find it for source as the address has apparently been deprecated. If anyone recognizes it, please post the source below.

I've posted some simplified version at the links below:

Current Version (Working):https://jsfiddle.net/ehayes/qtdj3ypq/

Version with Tag Selection (Not Working):https://jsfiddle.net/ehayes/t5jn1bwk/

HTML:

<div id="filterList">

<input id="filterInput" class="form-control" name="filter" placeholder="Filter..." value="" type="text"/>

<select id="filterSelect" name="tag" class="select2">
  <option value="">All</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>

<div id="filterContainer">

<div class="mix" style="width:100%;">
  <div class="title">
    <a href="#"><h3>Title 1</h3></a>
  </div>
  <p>Description for Title 1</p>
  <div class="tags">
    <p>Tags: A, B</p>
  </div>
  <hr/>
</div>

<div class="mix" style="width:100%;">
  <div class="title">
    <a href="#"><h3>Title 2</h3></a>
  </div>
  <p>Description for Title 2</p>
  <div class="tags">
    <p>Tags: B, C</p>
  </div>
  <hr/>
</div>

<div class="mix" style="width:100%;">
  <div class="title">
    <a href="#"><h3>Title 3</h3></a>
  </div>
  <p>Description for Title 3</p>
  <div class="tags">
    <p>Tags: C, D</p>
  </div>
  <hr/>
</div>

JS:

$(function(){

$("#filterList").mixItUp();

var inputText;
var selectText;
var $matching = $();

// Delay function
var delay = (function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

$("#filterInput").keyup(function(){
    // Delay function invoked to make sure user stopped typing
    delay(function(){
        inputText = $("#filterInput").val().toLowerCase();
        selectText = $("#filterSelect").val().toLowerCase();

        // Check to see if input field is empty
        if ((inputText.length) > 0 || (selectText.length) > 0) {            
            $( '.mix').each(function() {
                $this = $("this");

                //var filterString = $input.val() + $filterSelect.val();

                // add item to be filtered out if input text matches items inside the title   
                if($(this).children('.title' + '.tags').text().toLowerCase().match(inputText)) {
                    $matching = $matching.add(this);
                }
                else {
                    // removes any previously matched item
                    $matching = $matching.not(this);
                }
            });
            $("#filterList").mixItUp('filter', $matching);
        }

        else {
            // resets the filter to show all item if input is empty
            $("#filterList").mixItUp('filter', 'all');
        }
    }, 200 );
});

})

I figured the problem out. After I googled the problem a little more I came across a post on code pen that provided a resolution to my question.

You can see the for mentioned pen here: http://codepen.io/anon/pen/yJgQWB

which appears to be an offshoot of the original pen by patrickkunka here: https://codepen.io/patrickkunka/pen/iwcap

;)