Simple Select Filter Hierarchical For Bootstrap – Hierarchy Select

Simple Select Filter Hierarchical For Bootstrap
File Size:6.26 KB
Views Total:726
Last Update:April 10, 2018
Publish Date:December 27, 2017
Official Website:Go to website
License:MIT

Simple and light weight Hierarchy Select jQuery plugin in which convert to the Bootstrap dropdown component into a filterable hierarchical dropdown list. live search with dropdown select in input text box.

How It Use :

1. Use and include the jQuery Hierarchy Select plugin’s files into your Bootstrap install path :

<link rel="stylesheet" href="//dist/hierarchy-select.min.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
 <script src="//dist/hierarchy-select.min.js" type="text/javascript"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

2.  Create a Bootstrap dropdown with use data-level attribute to specify the data level search for each list item :

<div class="container">
    <h1>jQuery Hierarchy Select Plugin Demo</h1>
    <div class="panel panel-default">
        <div class="panel-body">
        <form>
            <div class="form-group">
                <div class="btn-group hierarchy-select" data-resize="auto" id="search_form_category">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                        <span class="selected-label pull-left"> </span>
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu open">
                        <div class="hs-searchbox">
                            <input type="text" class="form-control" autocomplete="off">
                        </div>
                        <ul class="dropdown-menu inner" role="menu">
                            <li data-value="" data-level="1" class="level-1 active">
                                <a href="#">All categories</a>
                            </li>
                            <li data-value="1" data-level="1" class="level-1">
                                <a href="#">Drink</a>
                            </li>
                            <li data-value="2" data-level="2" class="level-2">
                                <a href="#">Color</a>
                            </li>
                            <li data-value="3" data-level="3" class="level-3">
                                <a href="#">Blue</a>
                            </li>
                            <li data-value="4" data-level="3" class="level-3">
                                <a href="#">Green</a>
                            </li>
                            <li data-value="5" data-level="3" class="level-3">
                                <a href="#">Red</a>
                            </li>
                            <li data-value="6" data-level="2" class="level-2">
                                <a href="#">Country</a>
                            </li>
                            <li data-value="7" data-level="3" class="level-3">
                                <a href="#">India</a>
                            </li>
                            <li data-value="8" data-level="3" class="level-3">
                                <a href="#">Nepal</a>
                            </li>
                            <li data-value="9" data-level="2" class="level-2">
                                <a href="#">Paint</a>
                            </li>
                            <li data-value="10" data-level="3" class="level-3">
                                <a href="#">Burger</a>
                            </li>
                            <li data-value="11" data-level="3" class="level-3">
                                <a href="#">Asian</a>
                            </li>
                            <li data-value="12" data-level="2" class="level-2">
                                <a href="#">Rating</a>
                            </li>
                            <li data-value="13" data-level="2" class="level-2">
                                <a href="#">Grape Sort</a>
                            </li>
                            <li data-value="14" data-level="3" class="level-3">
                                <a href="#">Riesling</a>
                            </li>
                            <li data-value="15" data-level="3" class="level-3">
                                <a href="#">Aleatico</a>
                            </li>
                            <li data-value="16" data-level="3" class="level-3">
                                <a href="#">Bouchet</a>
                            </li>
                            
                        </ul>
                    </div>
                    <input class="hidden hidden-field" name="search_form[category]" readonly aria-hidden="true" type="text"/>
                </div>
            </div>
        </form>
        </div>
    </div>
</div>

3. Use JQuery Plgin :

$('#demo').hierarchySelect();

4. Default Setting :

$('#demo').hierarchySelect({

  // width/height
  width: 'auto',
  height: '208px',

  // enable hierarchical select
  hierarchy: false,

  // enable searchable select
  search: false
  
});

Done 🙂

Change Log

Change log:

2017-06-03

  • Fix initSelect

2017-02-01

  • Prevent disabled or hidden element selection

2017-01-26

  • Add handlers for keys: Esc, Enter, Up, Down