JSFiddle - React, Tailwind, and code Playground

by John O'Toole

HTML

<link rel="stylesheet" href="http://static.jstree.com/3.0.2/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://static.jstree.com/3.0.2/assets/dist/themes/default/style.min.css">
<div id="jstree_div">
    <ul>
        <li id="First group" '>First group  
				<ul>
					<li data-jstree='{ "icon": "glyphicon glyphicon-cog"} ' id="one">one</li>				
					<li data-jstree='{ "icon": "glyphicon glyphicon-cog"} ' id="two">two</li>
					<li data-jstree='{ "icon": "glyphicon glyphicon-cog"} ' id="three">three</li>
				</ul>
			</li>

			<li id="Second group"'>Second group
            <ul>
                <li data-jstree='{"icon":"glyphicon glyphicon-cog"}' id="four">four</li>
                <li data-jstree='{"icon":"glyphicon glyphicon-cog"}' id="five">five</li>
            </ul>
        </li>
        <li id="Third group" '>Third group
				<ul>
					<li data-jstree='{ "icon": "glyphicon glyphicon-cog"} ' id="six">six</li>
					<li data-jstree='{ "icon": "glyphicon glyphicon-cog"} ' id="seven">seven</li>					
				</ul>
			</li>
    </ul>
	</div>

		<script src="http://static.jstree.com/3.0.2/assets/jquery-1.10.2.min.js"></script>
		<script src="http://static.jstree.com/3.0.2/assets/dist/jstree.min.js"></script>
  <script>

	// Create an instance when the DOM is ready
  $(function () {
    $('#jstree_div ').jstree({
			"core" : {
				"animation" : 300,
				"check_callback" : true,
				"multiple" : false
			},			
			"plugins" : ["search", "types", "wholerow" ]
		});

		// Wire up the search	
		var timeOut = false;
		$('#jstree_search_txt ').keyup(function () {
			if(timeOut) { clearTimeout(timeOut); }
			timeOut = setTimeout(function () {
				var v = $('#jstree_search_txt ').val();
				$('#jstree_div ').jstree(true).search(v);
			}, 250);
		});

		// Bind to events triggered on the tree
		$('#jstree_div ').on("changed.jstree", function (e, data) {
			console.log(data.selected);
			$("#selected_element_div").text("Selected node: " +...