Mixitup - Search Filter

HTML

<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<div>
  
  <input type="text" class="form-control" id="filter" />
</div>
<div class="row" id="projects">          
  <div class="mix">
    <p>
    Test 1 alif
    </p>
  </div>    
  <div class="mix" data-epoch="4" data-name="b">
    <p>
    Test 2 alif
    </p>
  </div>   
  <div class="mix" data-epoch="2" data-name="c">
    <p>
    Test 3 alif
    </p>
  </div>
  <div class="mix" data-epoch="3" data-name="d">
    <p>
    Test 4 alif
    </p>
  </div>
</div>

CSS

.mix {
    height: 50px;
    border: 1px solid grey;
    /* Required by MixItUp: */
    display: none;
}

JavaScript

$(function(){
        // Instantiate MixItUp:
        $container = $('#projects')
        $container.mixItUp();
        $('#filter').keyup(function(){
          var val = $(this).val();
          var state = $container.mixItUp('getState');
          var $filtered = state.$targets.filter(function(index, element){
            return $(this).text().toString().indexOf( val.trim() ) >= 0;
          });
            
          $container.mixItUp('filter', $filtered);
        });
      });