Jquery.zTree模糊搜索树功能

1.引用包

<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>

2.HTML

<input id="citySel"  value="" onkeyup="AutoMatch(this)" placeholder="搜索模板" class="form-control">

<ul id="yyTree" class="ztree mobTree"></ul>

3.基础配置

var setting = {
		view: {
			selectedMulti: true  //支持多选
		},
		data: {
			simpleData: {
				enable: true  //简单数据格式
			}
		},
		callback: {
			beforeClick: getCurrentNode,
         	        onClick: zTreeOnClick
		}
};

var zNodes = [
    { id: 1, pId: 0, name: "北京" },
    { id: 2, pId: 0, name: "天津" },
    { id: 3, pId: 0, name: "上海" },
    { id: 6, pId: 0, name: "重庆" },
    { id: 4, pId: 0, name: "河北省", open: true },
    { id: 41, pId: 4, name: "石家庄" },
    { id: 42, pId: 4, name: "保定" },
    { id: 43, pId: 4, name: "邯郸" },
    { id: 44, pId: 4, name: "承德" },
    { id: 5, pId: 0, name: "广东省", open: true },
    { id: 51, pId: 5, name: "广州" },
    { id: 52, pId: 5, name: "深圳" },
    { id: 53, pId: 5, name: "东莞" },
    { id: 54, pId: 5, name: "佛山" },
    { id: 6, pId: 0, name: "福建省", open: true },
    { id: 61, pId: 6, name: "福州" },
    { id: 62, pId: 6, name: "厦门" },
    { id: 63, pId: 6, name: "泉州" },
    { id: 64, pId: 6, name: "三明" }
];

4.初始化数据

function InitialZtree() {
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
}

5.实现文本框的onkeyup事件且匹配zTree树节点

function AutoMatch(txtObj) {
    if (txtObj.value.length > 0) {
        InitialZtree();
        var zTree = $.fn.zTree.getZTreeObj("yyTree");
        var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);
        //将找到的nodelist节点更新至Ztree内
        $.fn.zTree.init($("#yyTree"),se, nodeList);
    } else {
        InitialZtree();                
    }              
}