介绍

最近在做系统的功能优化，其中有一个功能是搜索系统菜单，因为之前的搜索UI比较落后难看，全部用DIV实现，本次修改采用zTree树状结构展示，并且可以根据关键字进行模糊搜索并且把不符合条件的筛选掉，只显示符合条件的节点；

本次修改采用zTree树状结构，最终效果图：

点击文本框显示全部的菜单节点，输入搜索内容，根据内容过滤出需要的具体节点；

代码实现

引用

<link type="text/css" rel="stylesheet" href="ztree_v3/css/metroStyle/metroStyle.css">

<script type="text/javascript" src="ztree_v3/js/jquery.ztree.all.js"></script>

<script type="text/javascript" src="ztree_v3/js/jquery.ztree.exhide.js"></script>

HTML代码

<div class="top-search-div form-group form-group-sm has-success has-feedback" style="float: right;margin-top: 0;margin-bottom: 0;">

<div style="width: 65px;float: left;position: absolute;left: -48px;top: 6px;font-size: 12px;color:#333333;">菜单搜索</div>

<input type="text" class="form-control" id="top-search-input" name="top-search-input" placeholder="搜索内容..." autocomplete="off">

<span class="fa fa-angle-down form-control-feedback" id="top-search"></span>

</div>

获取菜单数据，并加载到zTree中

var resourcesTree;

function loadTree(){

var setting = {

data: {

key : {

name: "name",

title: "name"

}

},

view: {

showIcon: true,

selectedMulti: false

}

};

$.ajax({

type: 'POST',

url:"获取菜单数据的后台路径",

success: function(result){ resourcesTree=$.fn.zTree.init($("#resourcesTree"), setting,result);

resourcesTree.setting.async.enable=true;

treeNodelickAble=true;

}

});

};

点击文本框打开Ztree

$("#top-search-input").on("click",function(){

if($("#resourcesTreePanle").css("display") == "block"){

$("#resourcesTreePanle").css("display","none");

}

else{

$("#resourcesTreePanle").css("display","block");

}

})

按回车键搜索zTree

$("#top-search-input").keyup(function(e){

if(e.keyCode==13){

$("#top-search").click();

}

});

$("#top-search").click(function(){

if($("#resourcesTreePanle").css("display") == "block"){

$("#resourcesTreePanle").css("display","none");

}

else{ $("#resourcesTreePanle").css("display","block");

}

var nodes = resourcesTree.getNodesByParam("isHidden",true);

resourcesTree.showNodes(nodes);

var root = resourcesTree.getNodesByParamFuzzy("name", "", null);

var hiddenNodes = new Array();

var searchText = $("#top-search-input").val();

for(index in root){

filterNodes(root[index],searchText,hiddenNodes);

resourcesTree.hideNodes(hiddenNodes);

}

resourcesTree.expandAll(true);

});

过滤核心代码

使用递归实现，如果数据量比较大的情况下，可能会吃内存比较严重，可以采用后台处理

function filterNodes(node,inputStr,filterResult){

if(node != null){

//自身是否符合搜索条件

var selfMatch = node.name.indexOf(inputStr) > -1;

//子节点是否有满足条件的节点

var childMatch = false;

var children = node.children;

if(children != undefined){

for(index in children){

childMatch = filterNodes(children[index],inputStr,filterResult) || childMatch;

}

}

//自身不满足搜索条件且其子节点不包含有满足条件的节点

if(!selfMatch && !childMatch){

filterResult.push(node);

}

return selfMatch || childMatch;

}

else{

return true;

}

}

至此zTree实现前端模糊搜索及过滤掉不符合条件的节点已经完成；

参考资料：

Ztree官网：http://www.treejs.cn/v3/main.php#_zTreeInfo