【发布时间】：2017-05-09 12:45:48
【问题描述】：
我正在引导模式中构建引导树。在搜索时，所有节点都会被搜索并在匹配发生时突出显示。我的模式有固定的高度，如果搜索的元素出现在树的底部，我必须滚动才能查看元素。是否可以在匹配时自动滚动到第一个匹配的元素。这是我正在使用的插件。 Bootstrap-TreeView
一些代码供参考
<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('');
});
这是我制作的小提琴供参考
https://jsfiddle.net/whw3j59o/3/
假设树存在于固定高度的引导模式中，是否可以自动滚动以首先匹配？
【问题讨论】：
标签： javascript jquery twitter-bootstrap-3 treeview bootstrap-treeview