js实现模糊查询

最新推荐文章于 2024-07-10 15:33:09 发布

萝卜头不吃萝卜头

最新推荐文章于 2024-07-10 15:33:09 发布

阅读量4.3k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/SqlloveSyn/article/details/128453335

版权

今天为大家分享的是使用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>

以上就是本章的全部内容，感谢您的阅读。