今天为大家分享的是使用js实现模糊查询：
首先写出html
<div class="search"> <input type="text" class="inp"> <div class="but">搜索</div> </div> <div class="list"></div>
再写css
* { padding: 0; margin: 0; } .search { width: 96%; margin-left: 2%; height: 60px; display: flex; align-items: center; justify-content: center; } .search input { width: 60%; height: 20px; border: 1px #eeeeee solid; padding: 5px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .search div { width: 20%; height: 32px; text-align: center; line-height: 32px; background-color: #eeeeee; border-top-right-radius: 20px; border-bottom-right-radius: 20px; } .list { width: 96%; margin-left: 2%; } .list div { width: 100%; height: 40px; display: flex; justify-content: space-around; } .list span { display: block; width: 20%; line-height: 40px; text-align: center; }
现在结构样式都有的就该写数据了
let arr = [{ name: "吴小糖", addres: "河南", base: 410725, num: 9999 }, { name: "吴三", addres: "浙江", base: 102419, num: 10000 }, { name: "吴磊", addres: "北京", base: 314345, num: 5555 }, { name: "吴谨言", addres: "湖南", base: 341026, num: 7888 }, { name: "吴爽", addres: "河南", base: 410756, num: 6666 }, { name: "吴宣仪", addres: "海南", base: 243187, num: 9999 }]
下一步就该js部分了
let but = document.getElementsByClassName("but")[0]; let inp = document.getElementsByClassName("inp")[0]; sorts(arr); but.onclick = function() { let data = []; for (let i = 0; i < arr.length; i++) { for (let k in arr[i]) { if (String(arr[i][k]).indexOf(inp.value) > -1) { data.push(arr[i]); break; } } } sorts(data); } function sorts(a) { let str = ""; for (let i = 0; i < a.length; i++) { str += `<div> <span>${a[i].name}</span> <span>${a[i].base}</span> <span>${a[i].num}</span> <span>${a[i].addres}</span> </div>` } document.getElementsByClassName("list")[0].innerHTML = str; }
这样就制作完成了，整体代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> * { padding: 0; margin: 0; } .search { width: 96%; margin-left: 2%; height: 60px; display: flex; align-items: center; justify-content: center; } .search input { width: 60%; height: 20px; border: 1px #eeeeee solid; padding: 5px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .search div { width: 20%; height: 32px; text-align: center; line-height: 32px; background-color: #eeeeee; border-top-right-radius: 20px; border-bottom-right-radius: 20px; } .list { width: 96%; margin-left: 2%; } .list div { width: 100%; height: 40px; display: flex; justify-content: space-around; } .list span { display: block; width: 20%; line-height: 40px; text-align: center; } </style> </head> <body> <div class="search"> <input type="text" class="inp"> <div class="but">搜索</div> </div> <div class="list"></div> <script type="text/javascript"> let arr = [{ name: "吴小糖", addres: "河南", base: 410725, num: 9999 }, { name: "吴三", addres: "浙江", base: 102419, num: 10000 }, { name: "吴磊", addres: "北京", base: 314345, num: 5555 }, { name: "吴谨言", addres: "湖南", base: 341026, num: 7888 }, { name: "吴爽", addres: "河南", base: 410756, num: 6666 }, { name: "吴宣仪", addres: "海南", base: 243187, num: 9999 }] let but = document.getElementsByClassName("but")[0]; let inp = document.getElementsByClassName("inp")[0]; sorts(arr); but.onclick = function() { let data = []; for (let i = 0; i < arr.length; i++) { for (let k in arr[i]) { if (String(arr[i][k]).indexOf(inp.value) > -1) { data.push(arr[i]); break; } } } sorts(data); } function sorts(a) { let str = ""; for (let i = 0; i < a.length; i++) { str += `<div> <span>${a[i].name}</span> <span>${a[i].base}</span> <span>${a[i].num}</span> <span>${a[i].addres}</span> </div>` } document.getElementsByClassName("list")[0].innerHTML = str; } </script> </body> </html> </body> </html>
以上就是本章的全部内容，感谢您的阅读。
