title: Highlight and Scroll inside bootstrap-treeview
body: <p>I am building a bootstrap tree inside a bootstrap modal. On Search all the nodes are searched and highlights whenever a match happens. My modal has fixed height and If the searched element is present at the bottom part of the tree I have to scroll to view the element. Is it possible to scroll the automatically to the first matched element when there is a match. Here is the plug in I am using.
  <a href="https://jonmiles.github.io/bootstrap-treeview/" rel="nofollow noreferrer">Bootstrap-TreeView</a></p>
  
  <p>Some Code for reference</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;hr&gt;
      &lt;h2&gt;Searchable Tree&lt;/h2&gt;
      &lt;div class="col-sm-4"&gt;
        &lt;h2&gt;Input&lt;/h2&gt;
        &lt;!-- &lt;form&gt; --&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="input-search" class="sr-only"&gt;Search Tree:&lt;/label&gt;
            &lt;input type="input" class="form-control" id="input-search" placeholder="Type to search..." value=""&gt;
          &lt;/div&gt;
          &lt;div class="checkbox"&gt;
            &lt;label&gt;
              &lt;input type="checkbox" class="checkbox" id="chk-ignore-case" value="true" checked&gt;
              Ignore Case
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="checkbox"&gt;
            &lt;label&gt;
              &lt;input type="checkbox" class="checkbox" id="chk-exact-match" value="false"&gt;
              Exact Match
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="checkbox"&gt;
            &lt;label&gt;
              &lt;input type="checkbox" class="checkbox" id="chk-reveal-results" value="true" checked&gt;
              Reveal Results
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;button type="button" class="btn btn-success" id="btn-search"&gt;Search&lt;/button&gt;
          &lt;button type="button" class="btn btn-default" id="btn-clear-search"&gt;Clear&lt;/button&gt;
        &lt;!-- &lt;/form&gt; --&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4"&gt;
        &lt;h2&gt;Tree&lt;/h2&gt;
        &lt;div id="treeview-searchable" class="treeview"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="col-sm-4"&gt;
        &lt;h2&gt;Results&lt;/h2&gt;
        &lt;div id="search-output"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
        &lt;div id="tree"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>    var tree1 =[ {
      text:"GrandParent",
      nodes:[
      {
    text: "Parent 1",
  
  },
  {
    text: "Parent 2"
  },
  {
    text: "Parent 3"
  },
  {
    text: "Parent 4"
  },
  {
    text: "Parent 5",
     nodes: [
      {
        text: "Child 5",
        nodes: [
          {
            text: "Grandchild 4"
           },
          {
            text: "Grandchild 5"
          }
        ]
      },
        {
          text: "Child 2"
        }
      ]
    },
    {
      text: "Parent 6",
        nodes: [
       {
          text: "Child 6",
          nodes: [
            {
              text: "Grandchild 8"
            },
            {
              text: "Grandchild 9"
            }
          ]
        },
        {
          text: "Child 10"
        }
      ]
    }
  ]
  }];
  
   function getTree() {
    // Some logic to retrieve, or generate tree structure
    return tree1;
    }
  
  
    var $searchableTree = $('#treeview-searchable').treeview({
       data: getTree(),
    });
  
  var search = function(e) {
  var pattern = $('#input-search').val();
  var options = {
    ignoreCase: $('#chk-ignore-case').is(':checked'),
    exactMatch: $('#chk-exact-match').is(':checked'),
    revealResults: $('#chk-reveal-results').is(':checked')
      };
     var results = $searchableTree.treeview('search', [ pattern, options ]);
  
     var output = '&lt;p&gt;' + results.length + ' matches found&lt;/p&gt;';
     $.each(results, function (index, result) {
    output += '&lt;p&gt;- ' + result.text + '&lt;/p&gt;';
    });
    $('#search-output').html(output);
   }
  
   $('#btn-search').on('click', search);
   $('#input-search').on('keyup', search);
  
   $('#btn-clear-search').on('click', function (e) {
   $searchableTree.treeview('clearSearch');
   $('#input-search').val('');
   $('#search-output').html('');
  });
  </code></pre>
  
  <p>Here is the fiddle I have made for reference<br>
    <a href="https://jsfiddle.net/whw3j59o/3/" rel="nofollow noreferrer">https://jsfiddle.net/whw3j59o/3/</a></p>
  
  <p>Assuming the tree is present inside a fixed height bootstrap modal is it possible to the auto scroll to first match?</p>