Bootstrap-Treeview Search Functionality

by Pranjali Pai

HTML

<script src="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/js/bootstrap-treeview.js"></script>
<link rel="stylesheet" href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row" style="margin:5px;overflow-y:auto;">
  <hr>
  <h2>Searchable Tree</h2>
  <div class="col-sm-4">
    <!-- <form> -->
    <div class="form-group">

      <input type="input" class="form-control" id="input-search" placeholder="Type to search..." value="">
    </div>
    <button type="button" class="btn btn-success" id="btn-search">Search</button>
    <button type="button" class="btn btn-default" id="btn-clear-search">Clear</button>
    <!-- </form> -->
  </div>
  <div class="col-sm-4" style="margin:5px;">
    <h2>Tree</h2>
    <div id="tree" style=" overflow-y:auto; height: 250px; border: 1px solid #ccc ;"></div>
  </div>
</div>

JavaScript

var myTree = [{
  text: "Parent1",
  nodes: [{
    text: "Child11",
    nodes: [{
      text: "GrandChild111"
    }, {
      text: "GrandChild112"
    }]
  }, {
    text: "Child12"
  }]
}, {
  text: "Parent2",
  nodes: [{
    text: "Child21"
  }, {
    text: "Child22"
  }]
}, {
  text: "Parent3",
  nodes: [{
    text: "Child31"
  }, {
    text: "Child32"
  }, {
    text: "Child33"
  }]
}, {
  text: "Parent4"
}, {
  text: "Parent5",
  nodes: [{
    text: "Child51"
  }, {
    text: "Child52"
  }, {
    text: "Child33"
  }]
}, {
  text: "Parent6"
}, {
  text: "Parent7",
  nodes: [{
    text: "Child71",
    nodes: [{
      text: "GrandChild711"
    }, {
      text: "GrandChild712"
    }]
  }, {
    text: "Child72",
    nodes: [{
      text: "GrandChild711"
    }, {
      text: "GrandChild712"
    }]
  }]
}, {
  text: "Parent8"
}, {
  text: "Parent9",
  nodes: [{
    text: "Child91"
  }, {
    text: "Child92"
  }]
}, {
  text: "Parent10"
}];

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return myTree;
}
$('#tree').bind('mousewheel', function(e) {
  $(this).scrollTop($(this).scrollTop() - e.originalEvent.wheelDeltaY);
  return false;
});
var $searchableTree = $('#tree').treeview({
  data: getTree(),
  levels: 1
});
var search = function(e) {
  var input, filter, div, ul, li, a, i;
  var pattern = $('#input-search').val();
  var options = {
    ignoreCase: true,
    exactMatch: false,
    revealResults: true,
  };
  $searchableTree.treeview('search', [pattern, options]);
  
  //Scrolling to the element that is searched
  input = document.getElementById("input-search");
  filter = input.value.toUpperCase();
  div = document.getElementById("tree");
  li = div.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].scrollIntoView(false)[0];

    }
  }
}
$('#btn-search').on('click', search);

$('#btn-clear-search').on('click', function(e) {
 ...