2

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. Bootstrap-TreeView

Some Code for reference

<div class="row">
    <hr>
    <h2>Searchable Tree</h2>
    <div class="col-sm-4">
      <h2>Input</h2>
      <!-- <form> -->
        <div class="form-group">
          <label for="input-search" class="sr-only">Search Tree:</label>
          <input type="input" class="form-control" id="input-search" placeholder="Type to search..." value="">
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" class="checkbox" id="chk-ignore-case" value="true" checked>
            Ignore Case
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" class="checkbox" id="chk-exact-match" value="false">
            Exact Match
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" class="checkbox" id="chk-reveal-results" value="true" checked>
            Reveal Results
          </label>
        </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">
      <h2>Tree</h2>
      <div id="treeview-searchable" class="treeview"></div>

    </div>
    <div class="col-sm-4">
      <h2>Results</h2>
      <div id="search-output"></div>
    </div>
  </div>

      <div id="tree"></div>

Javascript:

    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 = '<p>' + results.length + ' matches found</p>';
   $.each(results, function (index, result) {
  output += '<p>- ' + result.text + '</p>';
  });
  $('#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('');
});

Here is the fiddle I have made for reference
https://jsfiddle.net/whw3j59o/3/

Assuming the tree is present inside a fixed height bootstrap modal is it possible to the auto scroll to first match?

4

1 回答 1

1

I recently started working with bootstrap-treeview and had the same question.

Solution:

We can use scrollIntoView() function. Bootstrap-treeview already has a search option which highlights the value, you can extend it.

I used the filter / search list and instead of filtering it scrolls down to the value that is being searched.

Code Reference:

HTML:

<div class="row" style="margin:5px;overflow-y:auto;">
  <div class="col-sm-4">
  <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>

  </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) {
  $searchableTree.treeview('clearSearch');
  $('#input-search').val('');
  $('#search-output').html('');
});

This part of the code filters and scrolls to the matched value:

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];

        }
      }

Ive added the zero in the end of this line so that it scrolls to the first match in the list

li[i].scrollIntoView(false)[0];

Heres a link to the demo - DEMO

于 2017-11-14T22:37:09.217 回答