jquery faceted taxonomy browser is a simple and intuitive design pattern for browsing hierarchical facets. It is based on a concept called “Miller columns“. If you are using the Mac OSX Finder app, you can see this feature in action.

Why are you using it?

It is becoming increasingly common to use facet categorization in organizations to manage large amounts of information. However, dials and their categories can be very broad and deep. This poses a challenge, especially for new employees, in learning vocabulary quickly.

Alternate approaches to displaying vocabulary, such as simple hierarchies, are not helpful for fast browsing (require the use of a back button) or are heavy (require scrolling).

The rating browser solves these problems by

• To be visible at all times (no page scrolling)
• Allow Fast Browsing – Easy back and forth navigation

How to make use of it:

1. Load the jQuery library and jQuery taxonomy browser plugin into the document.

<script src="jquery.min.js"></script>
<script src="jquery.taxonomyBrowser.js"></script>

2. Load jquery.taxonomyBrowser.keys.js to support keyboard navigation.

<script src="jquery.taxonomyBrowser.keys.js"></script>

3. Load the handlebars.js required to generate the semantic HTML templates for Miller columns.

<script src="handlebars.js"></script>

4. Create an HTML template based on handlebars.js on your web page.

<script type="text/x-handlebars-template" id="taxonomy_terms">
  
  <div class="miller--terms--container">
    
    {{#if parent}}
      <div class="miller--terms--selection">          
        {{#each parent}} {{#if @index}} &raquo; {{/if}} <a href="#" class="crumb" data-depth="{{depth}}">{{name}}</a>{{/each}}
      </div>
    {{/if}}

    <ul class="terms">
      {{#each taxonomies}}
        <li class="term {{#if childrenCount}}has-children{{/if}}" data-id="{{id}}">
          <a href="{{url}}">
            <span class="title">{{label}}</span> 
            <em class="icon icon-arrow"></em> <em class="icon icon-search" title="Search for {{label}}"></em>       
          {{#if description}}<span class="description">{{description}}</span>{{/if}}
          </a>
        </li>
      {{/each}}
    </ul>
    
  </div>  
  
</script>

5. The plugin currently supports loading hierarchical data from JSON files or nested HTML lists.

<!-- Load data from an extenal JSON file -->
<div class="miller-container" data-source="json">       
  
</div>

<div class="miller-container" data-source="html">       
  
  <ul>
    <li>
      <a href="">Parent 1</a>        
      <ul>
        <li><a href="#">Children - 1</a></li>
        <li><a href="#">Children - 2</a></li>
        <li><a href="#">Children - 3</a></li>
        <li><a href="#">Children - 4</a></li>
        <li>
          <a href="#">Children 5</a>
          <ul>
            <li><a href="#">Children 51</a></li>
            <li><a href="#">Children 52</a></li>
            <li><a href="#">Children 53</a></li>
            <li><a href="#">Children 54</a></li>
            <li><a href="#">Children 55</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="">Parent 2</a>        
      <ul>
        <li><a href="#">Children - 12</a></li>
        <li><a href="#">Children - 22</a></li>
        <li><a href="#">Children - 32</a></li>
        <li><a href="#">Children - 42</a></li>
        <li>
          <a href="#">Children 520</a>
          <ul>
            <li><a href="#">Children 521</a></li>
            <li><a href="#">Children 522</a></li>
            <li><a href="#">Children 523</a></li>
            <li><a href="#">Children 524</a></li>
            <li><a href="#">Children 525</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>


</div>

6. Initialize the plugin.

$('.miller-container').taxonomyBrowser({
  // options here
});

7. Full plugin options with default values.

// Data Source: html or json
source: 'json',

// Path to JSON data
json: 'json/taxonomy.json', 

// Root Taxonomies have a parent value of null
rootvalue: null, 

// Class of each miller column
columnclass: '.miller--column', 

// Number of columns
columns: 3, 

// Height of each column
columnheight: 400,

//  ID or index of the Taxonomy Where you want to start
start: '' 

// Handlebars template id
template: 'taxonomy_terms'

simple jquery miller columns, faceted taxonomy browser interfaces Plugin/Github

See Demo And Download

Official Website(PebbleRoad): Click Here

This superior jQuery/javascript plugin is developed by PebbleRoad. For extra advanced usage, please go to the official website.