JSFiddle - React, Tailwind, and code Playground

by Christopher McCulloh

HTML

<link rel="stylesheet" href="http://www.fuelcdn.com/fuelux-imh/2.6.1/css/fuelux.min.css">
<script src="http://www.fuelcdn.com/fuelux-imh/2.6.1/loader.js"></script>
<div class="fuelux">
<div id="MyTree" class="tree">
	<div class="tree-item" style="display:none;">
		<i class="tree-dot"></i>
		<div class="tree-item-name"></div>
	</div>
</div>
    
<div id="MyPillbox" class="pillbox">
	<ul>
	</ul>
</div>
</div>

CSS

.fuelux .tree i.icon-chevron-right, .fuelux .tree i.icon-chevron-down {
background-image: url(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png);
}

.icon-folder-close, .tree-dot, .icon-ok, .icon-folder-open{
    margin-left: 15px;
}

.fuelux .tree .tree-folder .tree-folder-header .tree-folder-name,
.fuelux .tree .tree-item .tree-item-name {
    padding-left: 40px;
}
.fuelux .pillbox li:after{float:none;background-color: transparent;}
#selected-things{
    margin-top: 10px;
    min-height: 100px;
position: relative;
padding: 10px 15px 0 15px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #bbb;
border-radius: 4px 4px 4px 4px;
}

JavaScript

var dataSource = {
    data: function(options, callback){
              callback({ data: [
                { name: 'Mountain Vacations', type: 'item' },
                { name: 'Beach Vacations', type: 'item' },
                { name: 'Desert Vacations', type: 'item' },
                { name: 'Ocean Vacations', type: 'item' }
             ]});             

    },
    columns: function(){
        return [];
    },
    delay: 0
}

$('#MyTree').tree({ multiSelect: true, dataSource: dataSource });
$('#MyPillbox').on( 'removed', function( event, data ) {
    console.log( 'pillbox removed', data );
    console.log( 'selected', $('#MyTree').tree('selectedItems'));

    var $itemEl = $('#MyTree').find("div.tree-item-name").filter(function (_, treeItem) {
        return $(treeItem).text() == data.text
    }).parent();
    $('#MyTree').tree("selectItem", $itemEl);
    //deselect item here...
});

$('body').on('click', '.tree-item', $.proxy( function(ev) { 
    $('#MyPillbox ul').empty();
    
    $.each($('#MyTree').tree('selectedItems'), function(i, thing){
        $('#MyPillbox ul').pillbox('addItem', thing.name)        
    });

} ,this));