Searchable And Collapsible Tree View Plugin With jQuery - almightree

File Size: 6.79 KB
Views Total: 9778
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Searchable And Collapsible Tree View Plugin With jQuery - almightree

almightree is an easy-to-use jQuery plugin for rendering a filterable and collapsible tree view interface from large nested html lists.

Features:

  • Live search through an input field.
  • Click the bullet of a node to search for child content.
  • Collapse and expand nodes by clicking on the headings.

How to use it:

1. To use the plugin start with adding the following in your html document.

<link rel="stylesheet" href="almightree.css">
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="jquery.almightree.js"></script>

2. Create a tree view from nested html lists like this:

<ul id="tree">
  <li>Top-level headline
    <ul>
      <li>First-level item
        <ul>
          <li>Second-level item</li>
          <li>Another one</li>
        </ul>
      </li>
      <li>Another first-level item
        <ul>
          <li>You get the idea
            <ul>
              <li>Surprise!</li>
              <li>And something relly long: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
            </ul>
          </li>
          <li>Here's some third-level content:
            <ul>
              <li>Surprise!</li>
              <li>And something relly long: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

3. Create an input field to filter your data.

<input id="box"> <a href="#" id="clear">clear</a>

4. Initialize the plugin and specify the selector of the search box.

$("#tree").almightree({search: "#box"});

Change log:

2016-07-09

  • Do not update document.title when trackHash=false

This awesome jQuery plugin is developed by blinry. For more Advanced Usages, please check the demo page or visit the official website.