easyui tree 搜索高亮显示

先看效果

 代码:

 $("#input_s").bind("input", function () {

        $("#ul_easyui").tree(
            {
                data: TreeData     //恢复初始tree
            });
        var value = $("#input_s").val();  //获取查找的值
        if (value != "") {
            var Allnode = $("#ul_easyui").tree('getChildren');    //获取Tree的所有节点
            var node = [];    //获取所有叶(带attributes属性的)
            for (var i = 0; i < Allnode.length; i++) {
                if (Allnode[i].attributes != null && Allnode[i].attributes != undefined) {   //有attributes说明是模板
                    if (Allnode[i].attributes.url != null) {
                        node.push(Allnode[i]);
                    }
                }
            }
            //获取文本框输入的内容
            var selectNode = [];
            //查找相应节点，高亮显示

            for (i = 0; i < node.length; i++) {
                var treeId = node[i].id;   //叶的id
                var treeName = node[i].text; //叶的text
                //找到相应的节点
                if (treeName.indexOf(value) >= 0) {   //模糊匹配
                    var nodes = $("#ul_easyui").tree('find', treeId);   //找到当前的节点          
                    nodes.iconCls = "icon-none"; //图标清空 对应css样式 icon-none
                    var title = nodes.target.getElementsByClassName("tree-title")[0]; //获取当前叶下的tree-title
                    //将你查找的指定文本替换为 标签加颜色
                    var aa = title.innerText.replace(value, '<span style="color:#E1962C">' + value + '</span>');
                    $("#ul_easyui").tree("update",  //修改node的text属性（带标签的）
                        {
                            target: nodes.target,
                            text: aa
                        });
                    selectNode.push(nodes);   //追加到数组中
                }
            }

            $("#ul_easyui").tree(
                {
                    data: selectNode    //当value不为空时，重新赋值tree
                });
            if (selectNode.length > 0) {
                titleBd();
                $(".tree1").css("background-image", "none");
            } else {
                $(".tree1").css("background", "url(login/NoData.png)  no-repeat 50%");
            }
        } else {
            titleBd();
            $(".tree1").css("background-image", "none");
        }
    });

      其实就是把我们搜索的文字替换为标签，这么做得话，会有一个问题，就是点击tree节点添加tabs时，设置title为node.text就会包含一个span标签，这时我们使用node.target.InnerText就没有问题了。

替换后的html代码: