ztree根據關鍵字模糊搜索

html頁面需要引入以下資源

<!-- jquery包，ztree依賴jquery --> 
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>

<!-- ztree核心包，ztree核心功能 -->    
<script type="text/javascript" src="jquery.ztree.core-3.5.min.js"></script>

<!-- ztree exhide包，ztree隱藏顯示結點需要此包支持 -->   
<script type="text/javascript" src="jquery.ztree.exhide-3.5.min.js"></script>

html頁面結構

    <div class="container">
        <div class="search-bar">
            <input id="keyword" type="text" placeholder="請輸入...">
            <button id="search">搜索</button>
        </div>
        <div class="content">
            <!-- 用於顯示ztree的html元素的class一定要設置為ztree-->
            <ul id="ztreeObj" class="ztree"></ul>
        </div>
    </div>

js核心代碼

 對於一個結點，它是否需要顯示，不僅僅只看它是否包含搜索關鍵字，還需要看它的父結點和子結點是否包含關鍵字，只有當父結點和子結點都不包含搜索關鍵字，該結點才需要隱藏

    /**
     * 查找子結點，如果找到，返回true，否則返回false
     */
    function searchChildren(keyword,children){
        if(children == null || children.length == 0){
            return false;
        }
        for(var i = 0;i < children.length;i++){
            var node = children[i];
            if(node.name.indexOf(keyword)!=-1){
                return true;
            }
            //遞歸查找子結點
            var result = searchChildren(keyword,node.children);
            if(result){
                return true;
            }
        }
        return false;
    }
    
    /**
     * 查找當前結點和父結點，如果找到，返回ture，否則返回false
     */
    function searchParent(keyword,node){
        if(node == null){
            return false;
        }
        if(node.name.indexOf(keyword)!=-1){
            return true;
        }
        //遞歸查找父結點
        return searchParent(keyword,node.getParentNode());
    }
    
    var hiddenNodes = [];
    $('#search').click(function(){
        var ztreeObj = $.fn.zTree.getZTreeObj("ztreeObj");
        //顯示上次搜索后隱藏的結點
        ztreeObj.showNodes(hiddenNodes);
        //查找不符合條件的結點
        //返回true表示要過濾，需要隱藏，返回false表示不需要過濾，不需要隱藏
        function filterFunc(node){
            var keyword=$("#keyword").val();
        //如果當前結點，或者其父結點可以找到，或者當前結點的子結點可以找到，則該結點不隱藏
            if(searchParent(keyword,node) || searchChildren(keyword,node.children)){
                return false;
            }
            return true;
        };

        //獲取不符合條件的葉子結點
        hiddenNodes=ztreeObj.getNodesByFilter(filterFunc);

        //隱藏不符合條件的葉子結點
        ztreeObj.hideNodes(hiddenNodes);
    });