js-directory-tree is a pure JavaScript implementation of a folder/directory tree control that allows the filtering of child nodes on the client side.
Must Read: jQuery Dynamic Hierarchy Treeview Plugin | jsTree
How to make use of it:
1. Create an empty container to place the folder tree.
<div id="folders"></div>
2. Create a filed search to filter the folder tree.
<input placeholder="filter..." id="filterInput" oninput="solve()" type="text"/>
3. Add nodes to the folder tree following the JSON structure as follows:
const folders = { type: 'dir', name: 'app', children: [ { type: 'file', name: 'index.html' }, { type: 'dir', name: 'js', children: [ { type: 'file', name: 'main.js' }, { type: 'file', name: 'app.js' }, { type: 'file', name: 'misc.js' }, { type: 'dir', name: 'vendor', children: [ { type: 'file', name: 'jquery.js' }, { type: 'file', name: 'underscore.js' } ] } ] }, { type: 'dir', name: 'css', children: [ { type: 'file', name: 'reset.css' }, { type: 'file', name: 'main.css' } ] } ] };
4. Main javascript to activate folder tree.
function displayJsonTree( data) { var htmlRetStr = "<ul class='folder-container'>"; for (var key in data) { if (typeof(data[key])== 'object' && data[key] != null) { htmlRetStr += displayJsonTree( data[key] ); htmlRetStr += '</ul></li>'; } else if(data[key]=='dir'){ htmlRetStr += "<li class='folder-item'>" + data["name"]+"</li><li class='folder-wrapper'>"; } else if( key=='name' && data['type']!='dir' ){ htmlRetStr += "<li class='file-item'>" + data['name']+"</li>"; } } return( htmlRetStr ); } function filterJson(data,string) { arr = []; for (var key in data) if (typeof(data[key]) == 'object' && data[key] != null) { if (data['name'].indexOf(string) <= -1) { for (var i = 0; i < data.children.length; i++) { arr=arr.concat(filterJson(data.children[i], string)); } return arr; } } else { if (data['name'].indexOf(string) > -1) { arr = arr.concat(data); return arr; } } } document.getElementById("folders").innerHTML= displayJsonTree(folders); function solve() { var toSearch=document.getElementById('filterInput').value; if(toSearch.length==0){ document.getElementById("folders").innerHTML= displayJsonTree(folders); } else { var str = "Searching for: " + document.getElementById('filterInput').value ; document.getElementById("searchingFor").innerHTML = str; document.getElementById("folders").innerHTML = displayJsonTree(filterJson(folders, document.getElementById('filterInput').value)); } }
Must Read: Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview
See Demo And Download
Official Website(nicutimofte): Click Here
This superior jQuery/javascript plugin is developed by nicutimofte. For extra Advanced Usage, please go to the official website.