yevlakhov
4/23/2015 - 1:47 PM

JS Bin // source http://jsbin.com/lulori

JS Bin

// source http://jsbin.com/lulori

jsbin.lulori.js
content_copyfile_download
$(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);
        });
      });
jsbin.lulori.css
content_copyfile_download
.mix {
    height: 50px;
    border: 1px solid grey;
    /* Required by MixItUp: */
    display: none;
}
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.mix {
    height: 50px;
    border: 1px solid grey;
    /* Required by MixItUp: */
    display: none;
}
</style>
</head>
<body>
<div>
  Filter:
  <input type="text" class="form-control" id="filter" />
</div>
<div class="row" id="projects">          
  <div class="mix" data-epoch="1" data-name="a">
    Test
  </div>    
  <div class="mix" data-epoch="4" data-name="b">
    Test 2
  </div>   
  <div class="mix" data-epoch="2" data-name="c">
    Test 3
  </div>
  <div class="mix" data-epoch="3" data-name="d">
    Test 4
  </div>
</div>
<script id="jsbin-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);
        });
      });
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
  <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"><\/script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>
  Filter:
  <input type="text" class="form-control" id="filter" />
</div>
<div class="row" id="projects">          
  <div class="mix" data-epoch="1" data-name="a">
    Test
  </div>    
  <div class="mix" data-epoch="4" data-name="b">
    Test 2
  </div>   
  <div class="mix" data-epoch="2" data-name="c">
    Test 3
  </div>
  <div class="mix" data-epoch="3" data-name="d">
    Test 4
  </div>
</div>
</body>
</html></script>

<script id="jsbin-source-css" type="text/css">.mix {
    height: 50px;
    border: 1px solid grey;
    /* Required by MixItUp: */
    display: none;
}</script>

<script id="jsbin-source-javascript" type="text/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);
        });
      });</script></body>
</html>