使用简单的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交易量来进行模糊搜索。
)
