<!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>
沒有后台API接口 前端頁面實現搜索框模糊查詢
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。