<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="search" placeholder="西游记人物模糊查询" id="search">
<ul>
</ul>
<script>
//模拟的json数据
var arr=[
{"id":1,"name":"猪八戒"},
{"id":2,"name":"天蓬元帅"},
{"id":3,"name":"沙和尚"},
{"id":4,"name":"唐僧"},
{"id":5,"name":"白骨精"},
{"id":6,"name":"齐天大圣"},
{"id":7,"name":"如来"},
{"id":8,"name":"牛魔王"},
{"id":9,"name":"红孩儿"},
{"id":10,"name":"龙王"},
{"id":11,"name":"女儿国王"},
{"id":12,"name":"唐三藏"},
{"id":13,"name":"孙猴子"},
{"id":14,"name":"孙悟空"}
];
//======================第一种方案 使用includes（）
// document.getElementById("search").oninput=function () {
// if (this.value==""){ //判断内容为空的时候退出函数 ----->不判断当内容为空自动加载了数组全部内容
// return
// }
// document.querySelector("ul").innerHTML=""; //将上一次查询的结果清空
// for(var i=0;i<arr.length;i++){
// if(arr[i].name.includes(this.value)){ //查询数组中每一项数据
// var oLi=document.createElement("li"); //创建元素并赋值
// oLi.innerHTML=arr[i].name;
// document.querySelector("ul").append(oLi); //追加元素
// }
// }
// };
// ================第二种方案 使用正则的方式
document.getElementById("search").oninput=function () {
if (this.value==""){ //判断内容为空的时候退出函数 ----->不判断当内容为空自动加载了数组全部内容
return
}
document.querySelector("ul").innerHTML=""; //将上一次查询的结果清空
var reg=new RegExp(this.value); // 等同于 / this.value/
for (var j=0;j<arr.length;j++){
if(arr[j].name.match(reg)){ //查询数组中每一项数据
var oLi=document.createElement("li"); //创建元素并赋值
oLi.innerHTML=arr[j].name;
document.querySelector("ul").append(oLi); //追加元素
}
}
}
</script>
</body>
</html>