超有意思的模糊搜索
这个功能很有意思，下面我把我的示例给大家看看！
序号
姓名
交易量
公司
1
刘志杰
999
五头牛
#tb{
width: 100%;
height: 150px;
background-color: mediumpurple;
text-align: center;
font-size: 20px;
line-height: 55px;
}
#tb img{
background-size: 100%;
}
#nrong{
width: 100%;
height: 600px;
background-color: lightskyblue;
overflow: scroll;
}
#su{
width: 30%;
height: 30px;
background-color:white;
margin-left: 35%;
color: rebeccapurple;
}
#xuanx{
width: 100%;
height: 80px;
background-color: rgba(193, 193, 193, 0.2);
display: flex;
justify-content: space-around;
line-height: 45px;
font-size: 20px;
}
#nrone{
width: 100%;
height: 60px;
background-color: slategray;
display: flex;
justify-content: space-around;
font-size: 18px;
}上面是基本样式，还是很不错的！
//声明一个全局变量 mg
let mg;
//获取HTML中的交易量;
let jy = document.getElementById('jy');
//获取HTML中的内容框;
let nrong = document.getElementById('nrong');
//获取input输入款;
let su = document.getElementById('su');
//声明new XMLHttpRequest;
let mh = new XMLHttpRequest();
//使用 open 方法指定要请求的地址、类型和方式;
mh.open('get', 'mohu.json', true);
//使用send方法发送请求;
mh.send();
//绑定 onreadystatechange 事件;
mh.onreadystatechange = function() {
if (mh.readyState == 4 && mh.status == 200) {
let text = mh.responseText;
console.log(text);
let data = JSON.parse(text);
console.log(data);
mh = data;
wb(mh);
}
}
//判断 readyState 和 status 的状态;
// 接收数据通过 json 转换使用，是用json将数据转化为js可用的形式;
//mg=请求过来的数据;
//调用wb渲染;
//渲染函数
//创建一个函数 函数名为wb
function wb(data) {
let str = "";
for (let i = 0; i < data.length; i++) {
str += `
${[i+1]}
${data[i].num}
${data[i].volume}
${data[i].firm}
`;
}
nrong.innerHTML = str;
}
//声明一个空字符串;
//for循环 循环data数据;
//将自己创的jon数据与HTML的内容拼接;
//用innerHTHL给最外层的nrong进行渲染;
//声明一个全局变量jiao,变量值为 true(交易量);
let jiao = true;
//创建函数 函数名为jiao(){
function jiaoy() {
jiao = !jiao;
let arr = [];
if (jiao == true) {
arr = mh.sort(function(a, b) {
return a.volume - b.volume;
});
} else {
arr = mh.sort(function(a, b) {
return b.volume - a.volume;
});
}
wb(arr);
}
//通过点击让jiao的值取反 jiao = !jiao;
// 创建新的空数组
//if判断(变量值为true时){
//从小到大排序 赋值给新数组;
// }else{
//从大到小排序 赋值给新数组;
// }
// 调用渲染函数 传递的数据是新数组;
//}
//创建函数 函数名为sr;
function sr() {
let arr2 = [];
let val = document.getElementById('su').value;
for (let b = 0; b < mh.length; b++) {
if (String(mh[b].num).indexOf(val) > -1 || String(mh[b].volume).indexOf(val) > -1 || String(mh[b].firm).indexOf(
val) > -1) {
arr2.push(mh[b]);
}
}
wb(arr2);
}
//给input输入框绑定 oninput事件;
//声明一个空数组 arr2;
//声明一个变量 val 让它的值等于输入框的值;
//for 循环数据data;
//if 判断(姓名、交易量、公司的isdexof大于-1时){
//把这一数据放到新数组里;
// }
//调用渲染函数 传递的数据是新数组;这是写在js里的数据！
[{
"num":"刘志杰",
"volume":"999",
"firm":"五头牛"
},
{
"num":"王竹森",
"volume":"899",
"firm":"三只羊"
},
{
"num":"王炸",
"volume":"668",
"firm":"五头牛"
},
{
"num":"李炮",
"volume":"558",
"firm":"三只羊"
},
{
"num":"小屁孩",
"volume":"748",
"firm":"一只鸡"
},
{
"num":"小破孩",
"volume":"957",
"firm":"五头牛"
},
{
"num":"小妮子",
"volume":"967",
"firm":"一只鸡"
},
{
"num":"江流儿",
"volume":"698",
"firm":"三只羊"
},
{
"num":"江河",
"volume":"158",
"firm":"三只羊"
},
{
"num":"王山河",
"volume":"258",
"firm":"一只鸡"
},
{
"num":"刘志",
"volume":"624",
"firm":"三只羊"
},
{
"num":"刘杰",
"volume":"325",
"firm":"五头牛"
},
{
"num":"冯子材",
"volume":"681",
"firm":"三只羊"
},
{
"num":"冯源",
"volume":"199",
"firm":"三只羊"
},
{
"num":"熊大",
"volume":"919",
"firm":"五头牛"
},
{
"num":"熊二",
"volume":"932",
"firm":"一只鸡"
},
{
"num":"光头强",
"volume":"369",
"firm":"三只羊"
},
{
"num":"司马懿",
"volume":"479",
"firm":"三只羊"
},
{
"num":"司马光",
"volume":"874",
"firm":"一只鸡"
},
{
"num":"司马迁",
"volume":"581",
"firm":"三只羊"
},
{
"num":"刘禅",
"volume":"447",
"firm":"三只羊"
},
{
"num":"刘备",
"volume":"789",
"firm":"五头牛"
},
{
"num":"马超",
"volume":"339",
"firm":"一只鸡"
},
{
"num":"马子",
"volume":"579",
"firm":"三只羊"
},
{
"num":"郝海燕",
"volume":"589",
"firm":"三只羊"
},
{
"num":"崔有病",
"volume":"249",
"firm":"五头牛"
},
{
"num":"崔油饼",
"volume":"123",
"firm":"三只羊"
},
{
"num":"吕德华",
"volume":"321",
"firm":"一只鸡"
},
{
"num":"吕布",
"volume":"558",
"firm":"五头牛"
},
{
"num":"吕小布",
"volume":"682",
"firm":"五头牛"
}
]这是json数据！
结构就这么多！