简单的模糊查询

最新推荐文章于 2023-11-27 10:13:48 发布

&ACE&

最新推荐文章于 2023-11-27 10:13:48 发布

阅读量325

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_59525879/article/details/131401101

版权

该代码示例展示了如何利用JavaScript监听输入框内容变化，实时查询并显示匹配的数据列表。页面包含一个搜索框和一个结果展示区，当用户在输入框中输入内容时，程序会过滤数据数组并更新结果显示区。

摘要由CSDN通过智能技术生成

使用js在输入框输入内容，即可查询对应数据：

代码如下：

<!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: 50%;
						margin-left: 2%;
						height: 60px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
		
					.search input {
						width: 40%;
						height: 20px;
						padding: 5px;
						
					}
		
					.search div {
						width: 20%;
						height: 32px;
						text-align: center;
						line-height: 32px;
						background-color: #eeeeee;
						
					}
		
					.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: "男",
						num: 7779
					}, {
						name: "张三",
						addres: "浙江",
						base: "女",
						num: 7779
					}, {
						name: "吴三桂",
						addres: "北京",
						base: "男",
						num: 555
					}, {
						name: "李四",
						addres: "上海",
						base: "女",
						num: 913
					}, {
						name: "申鹤",
						addres: "河南",
						base: "女",
						num: 6666
					}, {
						name: "钟离",
						addres: "湖北",
						base: "男",
						num: 6666
					}]
		
					let but = document.getElementsByClassName("but")[0];
					let inp = document.getElementsByClassName("inp")[0];
					
					sorts(arr);
					console.log(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>

运行结果如下：