js实现模糊查询

这篇具有很好参考价值的文章主要介绍了js实现模糊查询。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

今天为大家分享的是使用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模糊查询,javascript,前端,html

 下一步就该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>

以上就是本章的全部内容,感谢您的阅读。 文章来源地址https://www.toymoban.com/news/detail-577102.html

到了这里,关于js实现模糊查询的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中轻量级模糊查询fuse.js使用

    由于本样例是基于vue3中来实现的,若你使用的是vue2,请在评论区中发表后,也会出vue2中的相关使用。fuse是一个前端自行进行模糊查询的相关插件,常用于系统路由菜单的相关搜索等数据量不太大的情况,若需要数据量很大,还是蛮建议通过后端返回数据的相关形式。 这里

    2024年02月02日
    浏览(47)
  • 1 请使用js、css、html技术实现以下页面,表格内容根据查询条件动态变化。

            注意:         1.背景颜色用ppt的取色器来获取:                 先点击ppt的形状轮廓,然后点击取色器,吸颜色,然后再点击形状轮廓的其他轮廓颜色,即可获取到对应颜色。           2.表格间的灰色线是在th和td中用border属性设置的;         3.在js中拼

    2024年02月16日
    浏览(43)
  • html+css+js实现微信和支付宝扫码支付前端

    本章教程,主要利用html+css+js技术实现微信和支付宝扫码支付前端页面。 目录 一、效果图预览  (1)支付宝扫码支付 (2)微信扫码支付 二、项目部分源码文件 (1)目录结构 (2)alipay.html (3)wxpay.html 三、项目完整源码下载 下载地址:html+css+js实现微信和支付宝扫码支付

    2024年02月11日
    浏览(80)
  • Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较

    Flutter vs 前端 杂谈 SliverAppBar的弹性背景的显隐效果使用Html+JS怎么实现 作者 : 李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 : 291148484@163.com 本文地址 :https://blog.csdn.net/qq_28550263/article/details/134149018 在 Flutter 中,最简单的 appbar 就是 Appbar 组件,它没有任何难点,任何刚

    2024年02月05日
    浏览(54)
  • Html转PDF,前端JS实现Html页面导出PDF(html2canvas+jspdf)

    一、背景介绍 ​ 当我们在不想改变后端代码的同时想是纯html页面导出PDF,那么(html2canvas+jspdf)就是无疑最好的选择,导出时它不占用我们服务器的资源,而是由用户本地自行执行js文件下载PDF,不占用我们系统的带宽,所以这无非是最好的选择方式。 二、疑问 1、为什么要

    2024年01月23日
    浏览(56)
  • 前端三大件html,css,js原生实现学生信息管理系统(课程设计)

      目录结构如该图所示,只要将文件命名成图上三种。代码即可正常运行。分别有三个文件,一个是app.js,放学生信息删除添加查询主要逻辑代码。login.html放登录页面样式以及相关逻辑。studentList.html 放置学生管理的页面。 运行效果图:   代码:  app.js login页面 studentList.

    2024年02月04日
    浏览(61)
  • Web前端:HTML+CSS+JS实现美女照片3D立方体旋转(1),网易资深Web前端架构师

    先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7 深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前! 因此收集整理了一份《2024年最新Web前端全套学习资料》,

    2024年04月23日
    浏览(50)
  • 【多选模糊查询】多选模糊查询, 全文检索 和 正则匹配,任选其一 查出结果的3种实现

    1,3,4 是我们库里的,下拉框多选,选择了3个值 搜 1,搜出 前两条。 搜 2,搜出 第一条 和 第三条 搜2,4,搜出都会搜出来 参考:https://blog.csdn.net/qq120631157/article/details/130079470 注意配置: 前端的参数替换一下 参考文章:https://blog.csdn.net/qq120631157/article/details/130082537 重在实现

    2024年02月03日
    浏览(41)
  • 前端全集Ⅰ---- HTML/CSS/JavaScript

    Web:全球广域网,也称万维网,能够通过浏览器访问的网站 Web网站的工作流程:(前后端分离模式) 网页有哪些组成? 文字、图片、视频、音频、超链接 前端代码通过浏览器的解析和渲染变成用户看到的页面,对网页进行解析渲染的部分就是浏览器的内核 Web标准 不同的浏

    2024年02月15日
    浏览(72)
  • layui实现地址下拉框模糊查询

    注意:千万不要少 lay-search 控制器中 service层

    2024年01月18日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包