Multi-Column MultiSelect - Filtered by data-attributes

Simple example using 1 data-attribute Markus Doits code

by chayacooper

HTML

<script src="https://dl.stellenticket.de/tmp/jquery.multiselect.js"></script>
<link rel="stylesheet" href="https://dl.stellenticket.de/tmp/jquery.multiselect.css">
<form>
<div id="container">    
    <div id="attributes-Colors" class="filterOptions" data-type="color">  
         <select multiple id="filter" style="width:400px"> 
         <optgroup>
            <option value="All">All Colors</option>
            <option value="Blue">Blue</option>
            <option value="Red">Red</option>
          </optgroup>
          <optgroup>
            <option value="Black">Black</option>
            <option value="Gray">Gray</option> 
          <optgroup>
       </select> 
    </div>    
                
    <div>  
        <ul id="content">
            <li data-color='["Black"]'>Item 1 - Black</li>
            <li data-color='["Blue", "Red", "Black"]'>Item 2 - Blue, Red, Black</li>     
            <li data-color='["Black & White"]'>Item 3 - Black & White</li>      
            <li data-color='["Black"]'>Item 4 - Black</li>       
            <li data-color='["Black"]'>Item 5 - Black</li>       
            <li data-color='["Red", "Black"]'>Item 6 - Red, Black</li>     
            <li data-color='["Black"]'>Item 7 - Black</li>      
            <li data-color='["Gray"]'>Item 8 - Gray</li>  
        </ul>
    </div>    
</div>
</form>

CSS

.ui-multiselect-checkboxes ul { float:left; list-style:none; padding:0px;margin:0px}

ol, ul {
    list-style: none;
}
.filterOptions ul {
    margin: 10px 0;
    overflow: hidden;
}
.filterOptions ul li {
    margin-right: 2px;
    float: left;
}
.filterOptions ul li a {
    padding: 0 10px;
    border: 1px solid #999;
    background: #cfcfcf;
    color: #fff;
    font-weight: bold;
    line-height: 50px;
    text-decoration: none;
    display: block;
}
.filterOptions ul li a:hover {
    background: #c9c9c9;
}
.filterOptions ul li.active a {
    background: #999;
}

#content {
    float: right;
}
}

CoffeeScript

$("#filter").on 'multiselectcreate', ->
  # get the dropdown menu
  menu = $(this).multiselect 'widget'
  menu.find('input').each ->
    # add color based on value
    $(this).parent().css('background-color', $(this).val())
    # you can do anything here with the menu - add other items, images, etc.
    # ... or completely redesign it

$(document).ready ->
 
  $("#filter").multiselect()  
  $("#filter").on "change.hideshow", (e) ->
    vals = $(this).val()    
    list_items = $("#content li")
    
    if !vals
      list_items.hide()
    else if 'All' in vals
      list_items.show()
    else       
      $("#content li").each ->
        found = false
        my_colors = $(this).data 'color'
        for val in vals
          if val in my_colors
            found = true
            break
      
        $(this)[if found then 'show' else 'hide']()
  .trigger 'change.hideshow'