layui tree组件实现搜索节点并展开

实现搜索节点并展开

//模拟数据1
                data1 = [
                    {
                    title: '江西',
                    id: 1,
                    children: [
                       {
                        title: '南昌',
                        id: 1000,
                        children: [
                            {
                            title: '青山湖区',
                            id: 10001
                            },
                            {
                                title: '高新区',
                                id: 10002
                            }
                        ]
                       },
                       {
                           title: '九江',
                           id: 1001
                       },
                     {
                      title: '赣州',
                      id: 1002
                     }
                    ]
                 },
                 {
                    title: '广西',
                    id: 2,
                    children: [{
                        title: '南宁',
                        id: 2000
                  },{
                      title: '桂林'
                    ,id: 2001
                  }]
                },{
                    title: '陕西'
                  ,id: 3
                  ,children: [{
                      title: '西安'
                    ,id: 3000
                  },{
                      title: '延安'
                    ,id: 3001
                  }]
                }]

html部分：

 <div class="demoTable">
        <div class="layui-inline">
            <input type="text" id="inputSearch" class="layui-input"  autocomplete="off" />
        </div>
        <button class="layui-btn" id="btn_query">搜索</button>
    </div>
    <div id="test1" class="demo-tree demo-tree-box" style="width: 500px; height: 1000px; overflow: scroll;"></div>

//js代码部分


//开启节点操作图标，增加、修改、删除
            tree.render({
                    elem: '#test13',
                    id: 'demotree',//设置id方面后面的重载操作
                    data: data1,
                    onlyIconControl: true,  //是否仅允许节点左侧图标控制展开收缩
                    click: function (obj)
                    {
                      layer.msg(JSON.stringify(obj.data));
                    }
            });
   // 回车事件
        $('#inputSearch').bind('keypress', function (event) {
            if (event.keyCode == "13") {
              	var value = $(this).val();
                //首选应将文本的颜色恢复正常
                  var node = $("#test13");
                  node.find('.layui-tree-txt').css('color', '');
                  //重载树，使得之前展开的记录全部折叠起来
                  tree.reload('demotree', {});
              if (value) {
                  $.each(node.find('.layui-tree-txt'), function (index, elem) {
                      elem = $(elem);
                      let textTemp = elem.text();
                      if (textTemp.indexOf(value) !==-1) {
                          elem.addClass("tree-txt-active");
                          elem.filter(':contains(' + value + ')').css('color', '#FFB800'); //搜索文本并设置标志颜色
                      }
                  });

                  $.each(node.find('.tree-txt-active'), function (index, elem){
                      elem = $(elem);
                      // 展开所有父节点
                      elem.parents('.layui-tree-set').each(function (i, item) {
                          if (!$(item).hasClass('layui-tree-spread')) {
                              $(item).find('.layui-tree-iconClick:first').click();
                          }
                      });
                  });
              }
            }
        });