效果圖
代碼展示：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="https://cdn.bootcss.com/zTree.v3/3.5.40/js/jquery.ztree.core.js"></script>
<link href="https://cdn.bootcss.com/zTree.v3/3.5.40/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<style>
.parent{
width: 100%;
display: flex;
justify-content: center;
margin-top: 50px;
}
.ztree{
overflow-y:scroll;
height: 300px;
width:222px;
overflow-x: hidden;
/* display: none; */
}
</style>
</head>
<body>
<div class="parent">
<div class="content">
<input type="text" name="" id="inp">
<div class="tip"></div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
<script>
function Ajax(collback){
$.ajax({
type:"get",
url:"./json.json",
dataType:"json",
success:function(res){
collback(res)
}
})
}
Ajax(res=>{
let arr=res;
function change(arr){
let newarr=[];
let children1=[];
let children2=[];
let children3=[];
let children4=[];
for (let index = 0; index < arr.length; index++){
if(arr[index].code.length==4){
getarr(children1,index)
}
if(arr[index].code.length==6){
getarr(children2,index)
}
if(arr[index].code.length==9){
getarr(children3,index)
}
if(arr[index].code.length==12){
getarr(children4,index)
}
};
function getarr(arrs,index){
let childrenItem={};
childrenItem.name=arr[index].name;
childrenItem.open=arr[index].open;
childrenItem.children=[];
childrenItem.parentcode=arr[index].code;
arrs.push(childrenItem)
}
newarr.push(children1)
for (let i = 0; i < children1.length; i++){
let e=children1[i].parentcode;
let changearr= changechild(e,children2)
children1[i].children=changearr
}
for (let i = 0; i < children2.length; i++){
let e=children2[i].parentcode;
let changearr= changechild(e,children3)
children2[i].children=changearr
}
for (let i = 0; i < children3.length; i++){
let e=children3[i].parentcode;
let changearr= changechild(e,children4)
children3[i].children=changearr
}
//過濾子數組
function changechild(e,arr){
let news=[]
for (let i = 0; i < arr.length; i++)
if(arr[i].parentcode.startsWith(e)){
news.push(arr[i])
}
return news
}
return newarr;
}
let zNodes= change(arr)[0]
// console.log(zNodes)
//tree
var zTreeObj;
// zTree 的參數配置，深入使用請參考 API 文檔（setting 配置詳解）
var setting = {};
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
var flag = true;
$('#inp').on('compositionstart',function(){
flag = false;
})
$('#inp').on('compositionend',function(){
flag = true;
})
$('#inp').on('input',function(){
setTimeout(function(){
if(flag){
// console.log(1);
let value= $("#inp").val();
// console.log(value);
let arrs=[] //名字中包含子
let arrs2=[] //過濾后的樹
let arrss=[] //和名字相同
for (let i = 0; i < arr.length; i++) {
if(value.length>0 && arr[i].name.indexOf(value) != -1){
arrs.push(arr[i])
}
if(value.length>0 && arr[i].name==value){
arrss.push(arr[i])
}
}
// console.log(arrs) 處理模糊搜索
for (let j = 0; j < arrs.length; j++) {
for (let i = 0; i < arr.length; i++){
if( (arr[i].code==arrs[j].code || arr[i].code==arrs[j].code.slice(0,4)|| arr[i].code==arrs[j].code.slice(0,6)|| arr[i].code==arrs[j].code.slice(0,9))){
arr[i].open=true;
arrs2.push(arr[i])
// console.log(arr[i])
}
}
}
//處理精確搜索(模糊搜索中已處理了父節點)
for (let j = 0; j < arrss.length; j++) {
for (let i = 0; i < arr.length; i++){
if(arr[i].name==arrss[j].name ){
// console.log(arr[i].code)
for (let k = 0; k < arr.length; k++){
if(arr[k].code.startsWith(arr[i].code)){
// arr[k].open=true;
arrs2.push(arr[k])
}
}
}
}
}
let abc=[...new Set(arrs2)]
// console.log(abc)
let zNodes2= change(abc)[0]
// console.log(zNodes2)
if(zNodes2.length==0 && value ){
$(".tip").text("′⌒` 未找到你想要的內容")
// console.log(arrs.length)
zNod=[];
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNod);
} else if(zNodes2.length==0 && !value){
$(".tip").text("");
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
}else{
$(".tip").text("");
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes2);
}
}
},0)
})
})
</script>
</body>
</html>
~~~
