改造layui

layui"/>

改造layui

效果如下：

一个不支持关键字搜索的树不是一个德智体美全面发展的好树，看了layui源码后发现官方其实提供了tree的搜索功能

找到tree.js文件在基础配置这里发现showSearch，原来官方把这里注释掉了，放开注释就行（我下的版本里是注释掉的，可以看看自己的版本如果没有可以自己加上就行）

接下来我们在当前页面搜showSearch字段找到如下

可以看到在树上面自己添加了一个搜索框，所以当我们showSearch设为true的时候不用自己写搜索框

然后全局搜layui-tree-search找到监听搜索输入框输入的方法

官方自己写的方法我做了调整，因为我们希望搜索完成后树自动展开，所以我自己加了几行代码使结果树展开

下面是修改后的所有代码

//搜索that.elem.find('.layui-tree-search').on('keyup', function() {var input = $(this),val = input.val(),pack = input.nextAll(),arr = [];//遍历所有的值pack.find('.' + ELEM_TEXT).each(function() {var entry = $(this).parents('.' + ELEM_ENTRY);//若值匹配，加一个类以作标识if ($(this).html().indexOf(val) != -1) {arr.push($(this).parent());var parentNode = $(pack).find('.layui-icon.layui-icon-addition');if (parentNode.length > 0) {parentNode.each(function() {$(this).attr('class', 'layui-icon layui-icon-subtraction');})}var select = function(div) {div.addClass('layui-tree-searchShow layui-tree-spread');$(div.parent('.' + ELEM_PACK)[0]).css('display', 'block');//向上父节点渲染if (div.parent('.' + ELEM_PACK)[0]) {select(div.parent('.' + ELEM_PACK).parent('.' + ELEM_SET));};};select(entry.parent('.' + ELEM_SET));};});//根据标志剔除pack.find('.' + ELEM_ENTRY).each(function() {var parent = $(this).parent('.' + ELEM_SET);if (!parent.hasClass('layui-tree-searchShow')) {parent.addClass(HIDE);};});if (pack[0].className.indexOf('layui-tree-searchShow') == -1 && pack.find('.layui-tree-searchShow').length == 0) {that.elem.append(that.elemNone);};//节点过滤的回调options.onsearch && options.onsearch({elem: arr});});//还原搜索初始状态that.elem.find('.layui-tree-search').on('keydown', function() {$(this).nextAll().find('.' + ELEM_ENTRY).each(function() {var parent = $(this).parent('.' + ELEM_SET);parent.removeClass('layui-tree-searchShow ' + HIDE);});if ($('.layui-tree-emptyText')[0]) $('.layui-tree-emptyText').remove();});

原代码我改过也没保存大概就是这个区域的代码，可以自行对比区别

使用：最后只要在初始化树的时候设置showSearch为true