使用简单的js代码就可以实现模糊搜索功能，使用indexOf属性。
json假数据：使用数组包对象的方法，在json中设置了三列数据，分别是：名称，性别和交易额。
[{ "name": "虚拟星辰", "deal": 420, "sex": 1 }, { "name": "神秘星河", "deal": 301, "sex": 2 }, { "name": "灵光闪现", "deal": 290, "sex": 1 }, { "name": "微笑的月亮", "deal": 468, "sex": 2 }, { "name": "萌猫棉花糖", "deal": 105, "sex": 2 }, { "name": "未知的旅行家", "deal": 900, "sex": 1 }, { "name": "千变万化", "deal": 813, "sex": 1 }, { "name": "梦幻仙境", "deal": 742, "sex": 2 }, { "name": "甜点糖果", "deal": 609, "sex": 2 }, { "name": "网络风行", "deal": 305, "sex": 1 }, { "name": "星星饼干", "deal": 1059, "sex": 2 }]
HTML及css样式代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> h2 { text-align: center; } input { width: 50%; margin-left: 25%; } .content { font-size: 16px; display: flex; justify-content: space-around; margin-top: 30px; } .monicker { margin-top: 10px; } .gender { margin-top: 10px; text-align: center; } .trades { margin-top: 10px; text-align: center; } </style> </head> <body> <h2>排行榜</h2> <input type="text" class="inp" onchange="but()" /> <div class="content"> <div class="names">姓名 <div class="monicker">虚拟星辰</div> </div> <div class="sexs">性别<div class="gender">男</div> </div> <div class="trade">交易量 <div class="trades">420</div> </div> </div> <script src="js/dim.js"></script> </body> </html>
js代码：
// 声明一个全局变量data来存储从服务器获取的数据 let data; let xhr = new XMLHttpRequest(); xhr.open('get', 'js/dim.json', true); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { let text = xhr.responseText; console.log(text); data = JSON.parse(text); console.log(data); // 调用渲染函数 list(data); } }; // 封装函数 function list(data) { // 拼接姓名 let str = ''; // 拼接性别 let stre = ''; // 拼接交易量 let strs = ''; str += `<div class="names">姓名</div>`; stre += `<div class="sexs">性别</div>`; strs += `<div class="trade">交易量</div>`; // 遍历数组，拼接内容 for (let i = 0; i < data.length; i++) { str += `<div class="monicker">${data[i].name}</div>`; // 使用三元表达式，条件1 判断sex的值是否为1，为1则是男生，否则是女生 stre += `<div class="gender">${data[i].sex==1?`男`:`女`}</div>`; strs += `<div class="trades">${data[i].deal}</div>` }; // 将拼接好的内容设置到对应的HTML元素中 document.getElementsByClassName('names')[0].innerHTML = str; document.getElementsByClassName('sexs')[0].innerHTML = stre; document.getElementsByClassName('trade')[0].innerHTML = strs; }; // 获取输入框 let inp = document.getElementsByClassName('inp')[0]; console.log(inp); // 绑定onchange事件 function but() { console.log(data, inp.value); // 创建一个空数组用于存储过滤后的数据 var arr = []; // 遍历全局变量data中的数据 for (var i = 0; i < data.length; i++) { // 检查数据中name属性是否包含输入框的值 if (data[i].name.indexOf(inp.value) >= 0 || data[i].deal.toString().indexOf(inp.value) >= 0) { // 如果包含，则将数据添加到arr数组中 arr.push(data[i]); }; }; // 打印结果 console.log(arr); // 渲染页面 list(arr); };
上面的代码是通过假数据中的name和deal交易量来进行模糊搜索。
