JSFiddle - React, Tailwind, and code Playground

by Kamal Agarwal

HTML

<script src="http://wenzhixin.net.cn/p/multiple-select/assets/multiple-select/jquery.multiple.select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.2/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
<div id="users">

		<!-- filter -->
    	<div class="sub_table_search">
		<input class="search" placeholder="Suche ..." />
		<select class="category1_s" multiple style="width:198px;" data-placeholder="Category 1" name="category1">
		</select>
		<select class="category2_s" multiple style="width:198px;" data-placeholder="Category 2" name="category2">
		</select>
		<select class="category3_s" multiple style="width:198px;" data-placeholder="Category 3" name="category3">
		</select>
		<select class="category4_s" multiple style="width:198px;" data-placeholder="Category 4" name="category4">
		</select>
        </div>
        
        <p style="clear: both"></p><br>
        <div id="getSelectsBtn" class="reset">Reset Filter</div>
        <!-- /filter -->
        

    
        <!-- displayed data -->
		<ul class="list">
			<li>
            	<p class="date">04/03/2017</p>
				<p class="category1">Tom</p>
                <p class="category2">House</p>
                <p class="category3">Paris</p>
                <p class="category4">France</p>
            </li>
			<li>
            	<p class="date">04/03/2016</p>
				<p class="category1">Tim</p>
                <p class="category2">House</p>
                <p class="category3">Paris</p>
                <p class="category4">France</p>
            </li>
			<li>
            	<p class="date">15/01/2016</p>
				<p class="category1">Julia</p>
                <p class="category2">Hotel</p>
                <p class="category3">Paris</p>
                <p class="category4">France</p>
            </li>
			<li>
            	<p class="date">04/03/2017</p>
				<p class="category1">Frank</p>
                <p class="category2">Hotel</p>
     ...

CSS

.list {
  margin:0;
  padding:20px 0 0;}
  
.list > li {
	position:relative;
	float:left;
  	display:block;
	width:49%;
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
	box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    margin: 1% 0.5%;
	padding:25px;
    overflow: hidden;
    text-align: left;
	min-height:206px;}

.reset {
    cursor: pointer}

input.search {
    width:100%;}

.ms-parent {
    display: inline-block;
    position: relative;
    vertical-align: middle;
	width:25%;
	float:left;
}

.ms-choice {
	font-size:15px;
    display: block;
  	padding:16px 0px 22px 0px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #ededed;
    text-align: left;
    white-space: nowrap;
    line-height: 44px;
    color: #303030;
    text-decoration: none;
	border-radius:4px;
    background-color: transparent;
	width:100% !important;
}

.ms-drop {
    width: 99% !important;
}

.ms-choice.disabled {
    background-color: #f4f4f4;
    background-image: none;
    border: 1px solid #ddd;
    cursor: default;
}

.ms-choice > span {
    position: absolute;
    top: 0;
    left: 10px;
    right: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding-left: 8px;
}

.ms-choice > span.placeholder {
    color: #999;
}

.ms-drop {
    overflow: hidden;
    display: none;
    margin-top: -1px;
    padding: 0;
    position: absolute;
    z-index: 1000;
    background: #fff;
    color: #000;
    border: 1px solid #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.ms-drop.bottom {
    top: 100%;
    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
    box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
}

.ms-drop.top {
    bottom: 100%;
    -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
    box-shadow: 0 -4px 5px...

JavaScript

// multifilters for hide and display li elements
var options = { valueNames: [ 'category1', 'category2', 'category3', 'category4' ] };
var userList = new List('users', options);
 
var testList = function(){
updateList();
     $('.list li').sort(sortDescending).appendTo('.list');
}
var updateList = function(){
  var values_category1 = $(".category1_s").val()
  var values_category2 = $(".category2_s").val()
  var values_category3 = $(".category3_s").val()
  var values_category4 = $(".category4_s").val()
  
  userList.filter(function(item) {
    return (_(values_category1).contains(item.values().category1) || !values_category1) 
           && (_(values_category2).contains(item.values().category2) || !values_category2)
		   && (_(values_category3).contains(item.values().category3) || !values_category3)
		   && (_(values_category4).contains(item.values().category4) || !values_category4)
  });
   // console.info(fresult)
 
}
                               
$(function(){
  testList();
  $(".category1_s").change(testList);
  $(".category2_s").change(testList);
  $(".category3_s").change(testList);
  $(".category4_s").change(testList);
  
  var all_category1 = [];
  var all_category2 = [];
  var all_category3 = [];
  var all_category4 = [];

  _(userList.items).each(function(item){
    all_category1.push(item.values().category1)
    all_category2.push(item.values().category2)
	all_category3.push(item.values().category3)
	all_category4.push(item.values().category4)     
  });
  
  _(all_category1).uniq().each(function(item){
    $(".category1_s").append('<option value="'+item+'">'+ item +'</option>')
  });
  _(all_category2).uniq().each(function(item){
    $(".category2_s").append('<option value="'+item+'">'+ item +'</option>')
  });
  _(all_category3).uniq().each(function(item){
    $(".category3_s").append('<option value="'+item+'">'+ item +'</option>')
  }); 
  _(all_category4).uniq().each(function(item){
    $(".category4_s").append('<option value="'+item+'">'+ item...