Pure Javascript File Tree Filter From JSON Input | js-directory-tree

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.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Leave a Reply

Your email address will not be published. Required fields are marked *