Extending the Search Node Method of jQuery easyui tree (Recommended)

As shown below:

/**
 * 1Extends the node search method of jquery easyui tree. Usage is as follows:
 * $("#treeId").tree("search", searchText);	 
 * Among them, treeId is the ID of the root UL element of easyui tree, and searchText is the text to be searched.
 * If searchText is empty or "", it will restore the display of all nodes to the normal state
 */
(function($) {	
	$.extend($.fn.tree.methods, {
		/**
		 * Extend easyui tree's search method
		 * @param tree easyui tree's root DOM node (UL node) jQuery object
		 * @param searchText Search text
		 * @param this-context easyui tree's tree object
		 */
		search: function(jqTree, searchText) {
			//easyui tree's tree object. Methods of easyui tree can be called via tree.methodName(jqTree)
			var tree = this;
			//Get all tree nodes
			var nodeList = getAllNodes(jqTree, tree);
	 		//If there is no search condition, display all tree nodes
			searchText = $.trim(searchText);
	 		if (searchText == "") {
	 			for (var i=0; i<nodeList.length; i++) {
	 				$(".tree--targeted", nodeList[i].target).removeClass("tree--targeted
	 	 			$(nodeList[i].target).show();
	 	 		}
	 			//Expand the selected node (if previously selected)
	 			var selectedNode = tree.getSelected(jqTree);
	 			if (selectedNode) {
	 				tree.expandTo(jqTree, selectedNode.target);
	 			}
	 			return;
	 		}
	 		//Search for matching nodes and highlight them
	 		var matchedNodeList = [];
	 		if (nodeList && nodeList.length>0) {
	 			var node = null;
	 			for (var i=0; i<nodeList.length; i++) {
	 				node = nodeList[i];
	 				if (isMatch(searchText, node.text)) {
	 					matchedNodeList.push(node);
	 				}
	 			}
	 			//Hide all nodes
	 	 		for (var i=0; i<nodeList.length; i++) {
	 	 			$(".tree--targeted", nodeList[i].target).removeClass("tree--targeted
	 	 			$(nodeList[i].target).hide();
	 	 		} 			
	 			//Collapse all nodes
	 	 		tree.collapseAll(jqTree);
	 			//Display all matched nodes and their parent nodes 			
	 			for (var i=0; i<matchedNodeList.length; i++) {
	 				showMatchedNode(jqTree, tree, matchedNodeList[i]);
	 			}
	 		} 	 
		},
		/**
		 * Display the child nodes of the node (child nodes may have been hidden during the search process)
		 * @param node easyui tree node
		 */
		showChildren: function(jqTree, node) {
			//easyui tree's tree object. Methods of easyui tree can be called via tree.methodName(jqTree)
			var tree = this;
			//Display child nodes
			if (!tree.isLeaf(jqTree, node.target)) {
				var children = tree.getChildren(jqTree, node.target);
				if (children && children.length>0) {
					for (var i=0; i<children.length; i++) {
						if ($(children[i].target).is(":hidden")) {
							$(children[i].target).show();
						}
					}
				}
			} 	
		},
		/**
		 * Scroll the scrollbar to the specified node position to make the node visible (scroll if there is a scrollbar, do not scroll if there is no scrollbar)
		 * @param param {
		 * 	 treeContainer: The container of easyui tree (i.e., the tree container with a scrollbar). If it is null, it will take the parent node of the root UL node of easyui tree
		 *  targetNode: The easyui tree node to scroll to. If targetNode is empty, it will default to scrolling to the currently selected node, and if there is no selected node, it will not scroll
		 * } 
		 */
		scrollTo: function(jqTree, param) {
			//easyui tree's tree object. Methods of easyui tree can be called via tree.methodName(jqTree)
			var tree = this;
			//If node is empty, then get the currently selected node
			var targetNode = param && param.targetNode ? param.targetNode : tree.getSelected(jqTree);
			if (targetNode != null) {
				//Determine if the node is within the visible area				
				var root = tree.getRoot(jqTree);
				var $targetNode = $(targetNode.target);
				var container = param && param.treeContainer ? param.treeContainer : jqTree.parent();
				var containerH = container.height();
				var nodeOffsetHeight = $targetNode.offset().top - container.offset().top;
				if (nodeOffsetHeight > (containerH - 30)) {
					var scrollHeight = container.scrollTop() + nodeOffsetHeight - containerH + 30;
					container.scrollTop(scrollHeight);
				}							
			}
		}
	});
	/**
	 * Display the matched nodes of the search
	 */
	function showMatchedNode(jqTree, tree, node) {
 		//Display all parent nodes
 		$("node.target").show();
 		$(".tree-title", node.target).addClass("tree--targeted
 		var pNode = node;
 		while ((pNode = tree.getParent(jqTree, pNode.target))) {
 			$("pNode.target").show(); 			
 		}
 		//Expand to this node
 		tree.expandTo(jqTree, node.target);
 		//If it is a non-leaf node, all child nodes of the node need to be folded
 		if (!tree.isLeaf(jqTree, node.target)) {
 			tree.collapse(jqTree, node.target);
 		}
 	} 	 
	/**
	 * Determine if searchText matches targetText
	 * @param searchText Search text
	 * @param targetText Target text
	 * @return true-The search text matches the target text; otherwise, it is false.
	 */
	function isMatch(searchText, targetText) {
 		return $.trim(targetText) !== "" && targetText.indexOf(searchText) !==-1;
 	}
	/**
	 * Get all node nodes of easyui tree
	 */
	function getAllNodes(jqTree, tree) {
		var allNodeList = jqTree.data("allNodeList");
		if (!allNodeList) {
			var roots = tree.getRoots(jqTree);
 			allNodeList = getChildNodeList(jqTree, tree, roots);
 			jqTree.data("allNodeList", allNodeList);
		}
 		return allNodeList;
 	}
	/**
	 * Define the recursive algorithm to obtain the child nodes of easyui tree
	 */
 	function getChildNodeList(jqTree, tree, nodes) {
 		var childNodeList = [];
 		if (nodes && nodes.length>0) { 			
 			var node = null;
 			for (var i=0; i<nodes.length; i++) {
 				node = nodes[i];
 				childNodeList.push(node);
 				if (!tree.isLeaf(jqTree, node.target)) {
 					var children = tree.getChildren(jqTree, node.target);
 					childNodeList = childNodeList.concat(getChildNodeList(jqTree, tree, children));
 				}
 			}
 		}
 		return childNodeList;
 	}
) jQuery);

Because the original search of jQuery easyui tree only supports ID search, the method of expanding the jQuery easyui tree search node method has been extended to support fuzzy matching of node names and to hide mismatched nodes.

That's all the content of the expanded search method of the jQuery easyui tree node that the editor has brought to you. Hope everyone will support and cheer for the tutorial~