zTree 实现模糊搜索+高亮显示

1，准备四个js文件

2，html页面

<div  class="input_group" style="width: 400px;">
            <i class="iconfont icon-sousuo l"></i>
            <input type="text" value="" onkeyup="AutoMatch(this)" id="keyword_user" style="width: 370px;" placeholder="搜索">

            <label id="number"></label>
        </div>

        <div class="tree_message">
            <div class="treeList">
                <ul id="zTree" class="ztree"></ul>
            </div>
        </div>

3，js文件：ajax请求后台数据，初始化

//页面初始化加载
$(function(){
    initZtree();
});

/** 树形列表的各种操作*/
var zTreeObj;
var treeNodes;
var setting = {
    data: {                             //数据是否采用简单 Array 格式
        simpleData: {
            enable: true,
            idKey: "department_id",
            pIdKey: "parent_department_id",
            rootPId: 0
        },
        key: {
            name: "department_name"     //将department_name字段作为节点显示名称
        }
    },
    view: {
        showLine: false,                //是否显示节点间的连线
        showIcon : true,                //是否显示节点图标
        fontCss: setFontCss,            //字体样式
    },
    /*setting.check.enable = true & treeNode.nocheck = false*/
    check: {                            //勾选框
        enable: true,
        chkStyle: "checkbox",
        chkboxType: { "Y" : "ps", "N" : "ps" }
    },
    callback: {
        onClick: function (e, treeId, treeNode, clickFlag) {
            zTreeObj.checkNode(treeNode, !treeNode.checked, true);
        }
    }
};

function initZtree(){
    $.ajax({
        async : false,
        cache:false,
        type: 'POST',
        dataType : "json",
        url: base_url+"/itembook/findChildItem",//请求的action路径
        error: function () {//请求失败处理函数
            alert('请求失败');
        },
        success:function(data){ //请求成功后处理函数。
            debugger;
            data[0].open = true;
            console.log(data);
            treeNodes = data;   //把后台封装好的简单Json格式赋给treeNodes
        }
    });
    zTreeObj = $.fn.zTree.init($("#zTree"), setting, treeNodes);
    fuzzySearch('zTree','#keyword_user',null,true); //初始化模糊搜索方法

};

function setFontCss(treeId, treeNode) {
    return treeNode.level == 0 ? {color:"#181818"} : {color: "#434344"};
};

4.见证奇迹的时刻