JS实现模糊查询树形结构数据

需求

输入 “题2” 字，希望树形结构中带有 “题2” 字的项显示，即使父节点没有，但子节点含有，父节点仍要返回。

let arr = [
	{
		title: '标题1',
		children: [
			{
				title: '标题11',
				children: null
			},
			{
				title: '标题21',
				children: null
			}
		]
	},
	{
		title: '标题2',
		children: [
			{
				title: '标题22',
				children: null
			}
		]
	},
	{
		title: '标题3',
		children: null
	}
];

代码实现如下

<script>
	let rebuildData = (value, arr) => {
		let newarr = [];
		arr.forEach(element => {
			if (element.title.indexOf(value) > -1) { // 判断条件
				newarr.push(element);
			} else {
				if (element.children && element.children.length > 0) {
					let redata = rebuildData(value, element.children);
					let obj = {
						...element,
						children: redata
					};
					if (redata && redata.length>0) {
						newarr.push(obj);
					}
				}
			}
		});
		return newarr;
	};

	console.log(rebuildData('题2', arr));
</script>

输出结果

[
	{
		title: '标题1',
		children: [
			{
				title: '标题21',
				children: null
			}
		]
	},
	{
		title: '标题2',
		children: [
			{
				title: '标题22',
				children: null
			}
		]
	}
]