转：zTree树控件扩展篇：巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

<div class="content_wrap">
        <div class="zTreeDemoBackground left">
            <ul class="list">
                <li class="title">&nbsp;&nbsp;城市：<input id="citySel" type="text" value="" onkeyup="AutoMatch(this)"
                    style="width: 120px;" />
                </li>
            </ul>
        </div>
</div>
<div id="menuContent" class="menuContent" style="displayx: none; position: absolute;">
        <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 110px;">
        </ul>
</div>

var setting = {
            view: {
                selectedMulti: false //是否允许多选
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                //zTree节点的点击事件
                onClick: onClick
            }
};

//Ztree的初始数据
        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: "三明" }
         ];

//点击某个节点 然后将该节点的名称赋值值文本框
function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            //获得选中的节点
            var nodes = zTree.getSelectedNodes(),
            v = "";
            //根据id排序
            nodes.sort(function compare(a, b) { return a.id - b.id; });
            for (var i = 0, l = nodes.length; i < l; i++) {
                v += nodes[i].name + ",";
            }
            //将选中节点的名称显示在文本框内
            if (v.length > 0) v = v.substring(0, v.length - 1);
            var cityObj = $("#citySel");
            cityObj.attr("value", v);
            //隐藏zTree
            hideMenu();
            return false;
}

//显示树
function showMenu() {
            var cityObj = $("#citySel");
            var cityOffset = $("#citySel").offset();
            $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
}
       
 //隐藏树
function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
}

//还原zTree的初始数据
function InitialZtree() {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
}

///根据文本框的关键词输入情况自动匹配树内节点 进行模糊查找
function AutoMatch(txtObj) {
            if (txtObj.value.length > 0) {
                InitialZtree();
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);
                //将找到的nodelist节点更新至Ztree内
                $.fn.zTree.init($("#treeDemo"), setting, nodeList);
                showMenu();
            } else {
                //隐藏树
                hideMenu();
                InitialZtree();                
            }              
}

<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>