jQuery simTree插件搜索优化：实现匹配节点自动展开内部元素

我明白你的需求了——现在搜索只能展开对应的面板，但树形节点本身还是折叠的，我们需要让匹配到的节点自动展开它的所有父级，同时展开自身的子节点容器。下面是调整后的实现：

关键改动点 #

• 给每个树形节点添加属性，方便搜索匹配和层级关联
• 在搜索匹配时，遍历展开节点的所有祖先层级
• 同时展开匹配节点的子节点容器（如果存在）
• 优化搜索前的状态重置，避免残留展开效果

完整实现代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Checkable-Hierarchical-Tree/dist/simTree.css">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>sim-tree: Checkable Hierarchical Tree Demo</title>
<style>
body { min-height: 100vh; background-color: #fafafa;}
.container { margin: 150px auto; max-width: 640px; }
</style>
</head>
<body>
<div class="container">
<input type="text" name="search" class="form-control" value="" id="demo_2" placeholder="搜索分类..." autofocus style="margin-top:10px;"/>
<br/><br/>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" class="ul-laspe" data-parent="#accordion" href="#collapse1"> One </a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<div class="tree">
<div id="tree"></div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" class="ul-laspe" data-parent="#accordion" href="#collapse2"> Two </a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div class="tree">
<div id="tree2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/Checkable-Hierarchical-Tree/dist/simTree.js"></script>
<script>
var list = [{ "id": '1', "pid": '', "name": "JavaScript", }, { "id": '11', "pid": '1', "name": "Angular" }, { "id": '12', "pid": '1', "name": "React" },{ "id": '13', "pid": '1', "name": "Vuejs" },{ "id": '14', "pid": '1', "name": "jQueryScript.Net" }, { "id": '2', "pid": '', "name": "HTML5" }, { "id": '21', "pid": '2', "name": "" } ];
var list2 = [{ "id": '1', "pid": '', "name": "X JavaScript", }, { "id": '11', "pid": '1', "name": "X Angular" }, { "id": '12', "pid": '1', "name": "X React" },{ "id": '13', "pid": '1', "name": "X Vuejs" },{ "id": '14', "pid": '1', "name": "XY jQueryScript.Net" }, { "id": '2', "pid": '', "name": "X HTML5" }, { "id": '21', "pid": '2', "name": "" } ];

// 初始化两个树形组件
var tree1 = simTree({ 
    el: '#tree', 
    data: list, 
    check: true, 
    linkParent: true, 
    onClick: function (item) { console.log(item) }, 
    onChange: function (item) { console.log(item) } 
});
var tree2 = simTree({ 
    el: '#tree2', 
    data: list2, 
    check: true, 
    linkParent: true, 
    onClick: function (item) { console.log(item) }, 
    onChange: function (item) { console.log(item) } 
});

// 给每个树形节点添加搜索关键词属性
$('.sim-tree li').each(function(){ 
    $(this).attr('data-search-term', $(this).text().toLowerCase());
});

// 搜索事件处理逻辑
$('#demo_2').on('keyup keypress blur change', function() { 
    var searchTerm = $(this).val().toLowerCase();
    
    // 重置所有面板和树形节点状态
    $('.panel-collapse').collapse('hide');
    $('.sim-tree li').removeClass('sim-tree-open');
    $('.sim-tree ul').hide();

    if (searchTerm.trim() === ''){
        return;
    }

    // 遍历匹配的节点，展开对应层级
    $('.sim-tree li[data-search-term *= "' + searchTerm + '"]').each(function(){
        var $currentNode = $(this);
        
        // 展开当前节点所在的面板
        $currentNode.closest('.panel-collapse').collapse('show');
        
        // 展开当前节点的所有祖先节点
        $currentNode.parents('.sim-tree li').addClass('sim-tree-open').find('> ul').show();
        
        // 展开当前节点的子节点容器（如果存在子节点）
        if($currentNode.find('> ul').length > 0){
            $currentNode.addClass('sim-tree-open').find('> ul').show();
        }
    });
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>

实现说明 #

1. 状态重置：每次搜索前先隐藏所有面板、折叠所有树形节点，避免之前的搜索结果残留影响当前搜索。
2. 层级展开：通过parents('.sim-tree li')遍历匹配节点的所有祖先节点，添加插件自带的sim-tree-open类并显示子容器，确保整个路径都展开。
3. 子节点处理：如果匹配节点本身有子节点，也自动展开它的子容器，方便查看完整的分类结构。
4. 面板联动：确保匹配节点所在的Bootstrap面板自动展开，用户无需手动点击面板就能看到搜索结果。

这样调整后，搜索时就能自动展开匹配节点的整个层级结构，用户可以直观看到匹配节点的上下文啦！

内容的提问来源于stack exchange，提问作者rahul.m