JavaScript数据筛选和模糊搜索
HTML样式：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>数据筛选</title><link rel="stylesheet" href="./css/data.css">
</head><body><div class="billboard"><h2>富豪榜</h2></div><input type="text" class="input" placeholder="搜索..." oninput="seach(value)"><table class="Serial"><thead><tr class=""><td>序号</td><td>姓名</td><td onclick="sorts()">富豪榜</td></tr></thead><tbody></tbody></table><script src="./js/datas.js"></script>
</body></html>JS样式：
let data;let xhr = new XMLHttpRequest();
// 设置请求方式和请求地址
xhr.open('get', './js/data.json', true);
// 发送请求
xhr.send();
// 接收返回的响应数据
xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {data = JSON.parse(xhr.responseText);// 调用展示商品的函数console.log(data);// 调用函数show(data);}
};function show(data) {// 声明一个strlet str = ``;// for循环 循环假数据的长度for (let i = 0; i < data.length; i++) {// console.log(data);// 进行字符串拼接 将假数据获取过来str +=`<tr style="background-color:pink;"><td>${i + 1}</td><td>${data[i].name}</td><td>${data[i].ranking}</td></tr>`} if (data.length == 0) {str +=`<tr><td colspan="3">暂无数据</td></tr>`}// 将获取到的数据插入到页面当中document.getElementsByTagName('tbody')[0].innerHTML = str;
}function sorts() {// 进行if判断 存储一个数值if (sessionStorage.getItem("name") == 1) {data.sort((a, b) => a.ranking - b.ranking);sessionStorage.removeItem("name");} else {data.sort((a, b) => b.ranking - a.ranking);sessionStorage.setItem("name", "1");}// 调用渲染函数show(data);
}// 模糊搜索
function seach(target) {let arr = [];for (let i = 0; i < data.length; i++) {// 进行判断if (data[i].name.indexOf(target) >= 0 || String(data[i].ranking).indexOf(target) >= 0) {// push放入arr.push(data[i]);}console.log(arr);// 渲染函数show(arr);}
}JSON假数据：
[{"name": "老王","ranking": 8010},{"name": "老张","ranking": 9000}]希望能帮到你们哟！