JqTree
HTML
<script src="http://mbraak.github.io/jqTree/tree.jquery.js"></script>
<link rel="stylesheet" href="http://mbraak.github.io/jqTree/jqtree.css">
<button type="button" name="psychTree-selected">Show Selected</button>
<button type="button" name="psychTree-showAll">Show All</button>
<br />
<input type="text" name="psychTree-filter" style="width:50%" placeholder="search" />
<div id="psychTree"></div>
CSS
button {margin-right:10px}
JavaScript
// tree data
var psychData = [{
name: 'Neurodevelopmental Disorders',
id: 1,
children: [{
name: 'Intellectual Disability',
id: 2,
parent2: 'Neurodevelopment Disorders'
},
{
name: 'Speech Sound Disorder',
id: 3
},
{
name: 'Childhood Onset Fluency Disorder (Stuttering)',
id: 4
},
{
name: 'Autism Spectrum Disorder',
id: 5
},
{
name: 'Attention-Deficit/Hyperactivity Disorder',
id: 6
},
{
name: 'Tourettes Disorder',
id: 7
}
]
},
{
name: 'Schizophrenia Spectrum and Psychotic Disorders',
id: 8,
children: [{
name: 'Schizotypal Personality Disorder',
id: 9
},
{
name: 'Delusional Disorder',
id: 10
},
{
name: 'Brief Psychotic Disorder',
id: 11
},
{
name: 'Schizophreniform Disorder',
id: 12
},
{
name: 'Schizophrenia',
id: 13
},
{
name: 'Psychotic Disorder Due to Medical Condition',
id: 14
},
{
name: 'Catatonia',
id: 15
}
]
}
];
var filter = $('input[name="psychTree-filter"]');
var _filtering = false;
var thread = null;
$('#psychTree').tree({
data: psychData,
selectable: true,
dragAndDrop: false,
useContextMenu: false,
// closedIcon: $('<i class="fa fa-folder"></i>'),
// openedIcon: $('<i class="fa fa-folder-open"></i>'),
onCreateLi: function(node, $li) {
var title = $li.find('.jqtree-title');
var search = filter.val().toLowerCase();
var value = title.text().toLowerCase();
if (search !== '') {
var _parent = node.parent;
var _parentValue = (typeof _parent.name === 'string') ? _parent.name.toLowerCase() : "";
$li.hide();
while (typeof(_parent.element) !== 'undefined') {
if (value.indexOf(search) > -1 ||...