<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tree</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.content{
padding:40px;
}
.box{
padding:15px 0;
margin:10px 0;
border: 1px solid #dddddd;
}
input{
height: 28px;
width: 260px;
line-height:28px;
}
ul{
padding-left: 12px;
color:#333333;
}
ul li{
list-style: none;
line-height:29px;
};
</style>
<body>
<div class="content">
<input type="text" class="text-input" oninput="chengeValue()">
<div class="box">
<ul class="ul-box">
</ul>
</div>
</div>
</body>
<script>
const List = [
{
name: '中国',
children:[
{
name: '北京市',
children:[
{
name: '昌平区',
children: []
},
{
name: '朝阳区',
children: []
}
]
},
{
name: '重庆市',
children:[
{
name: '江北区',
children: [
{
name: '开州'
},
{
name: '万州'
}
]
},
{
name: '渝北区',
children: []
},
{
name: '大度区',
children: []
}
]
},
]
},
{
name: '汽车',
children:[
{
name: '本田',
children:[
{
name: '思域',
children: []
},
{
name: '五羊-本田',
children: []
}
]
},
{
name: '大众',
children:[
{
name: '法拉利',
children: [
{
name: '大大',
children: []
}
]
},
{
name: '保时捷',
children: []
},
{
name: '跑车',
children: []
}
]
},
]
},
];
var boxUl = document.querySelector(".ul-box");
renderTree(List,boxUl);
/**
* 改变值方法
* **/
function chengeValue(){
var textVal = document.querySelector(".text-input").value;
var copyList = JSON.parse(JSON.stringify(List));
var ul = document.querySelector(".ul-box");
ul.innerHTML = "";
if(!textVal){
renderTree(copyList,ul);
}
var temList = filterTree(copyList,textVal)
renderTree(temList,ul);
}
/**
* 值筛选方法
*
*/
function filterTree(list,textVal){
if(!textVal){
return;
}
let mateNode = [];
let reg = new RegExp(textVal);
for (let index = 0; index < list.length; index++) {
const item = list[index];
if(reg.test(item.name)){
item.color = "red";
mateNode.push(item);
}else if(item.children && item.children.length > 0){
let mateNodeChildren = filterTree(item.children,textVal);
if(mateNodeChildren && mateNodeChildren.length > 0){
item.children = mateNodeChildren;
mateNode.push(item);
}
}
};
return mateNode;
}
/**
* 渲染树
* **/
function renderTree(List,dom){
if(!dom || !List){
return;
}
for (let index = 0; index < List.length; index++) {
const element = List[index];
var p_li = document.createElement('li');
if(element.color){
p_li.style.color = element.color;
}
var span = document.createElement('span');
span.innerHTML = element.name;
p_li.appendChild(span);
dom.appendChild(p_li);
if(element.children && element.children.length > 0){
var ul = document.createElement('ul');
p_li.appendChild(ul);
renderTree(element.children, ul);
}
}
};
</script>
</html>
