改造layui-樹（tree）元件支援樹的關鍵字搜尋操作

效果如下：

一個不支援關鍵字搜尋的樹不是一個德智體美全面發展的好樹，看了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