使用js实现input框的模糊搜索

乐多_L

已于 2024-06-25 17:30:14 修改

阅读量432

点赞数 8

文章标签： javascript 前端开发语言

于 2024-06-25 16:30:48 首次发布

本文链接：https://blog.csdn.net/2301_81449444/article/details/139962457

版权

使用简单的js代码就可以实现模糊搜索功能，使用indexOf属性。

json假数据：使用数组包对象的方法，在json中设置了三列数据，分别是：名称，性别和交易额。

[{
	"name": "虚拟星辰",
	"deal": 420,
	"sex": 1
}, {
	"name": "神秘星河",
	"deal": 301,
	"sex": 2
}, {
	"name": "灵光闪现",
	"deal": 290,
	"sex": 1
}, {
	"name": "微笑的月亮",
	"deal": 468,
	"sex": 2
}, {
	"name": "萌猫棉花糖",
	"deal": 105,
	"sex": 2
}, {
	"name": "未知的旅行家",
	"deal": 900,
	"sex": 1
}, {
	"name": "千变万化",
	"deal": 813,
	"sex": 1
}, {
	"name": "梦幻仙境",
	"deal": 742,
	"sex": 2
}, {
	"name": "甜点糖果",
	"deal": 609,
	"sex": 2
}, {
	"name": "网络风行",
	"deal": 305,
	"sex": 1
}, {
	"name": "星星饼干",
	"deal": 1059,
	"sex": 2
}]

HTML及css样式代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			h2 {
				text-align: center;
			}

			input {
				width: 50%;
				margin-left: 25%;
			}

			.content {
				font-size: 16px;
				display: flex;
				justify-content: space-around;
				margin-top: 30px;
			}

			.monicker {
				margin-top: 10px;
			}

			.gender {
				margin-top: 10px;
				text-align: center;
			}

			.trades {
				margin-top: 10px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h2>排行榜</h2>
		<input type="text" class="inp" onchange="but()" />

		<div class="content">
			<div class="names">姓名
				<div class="monicker">虚拟星辰</div>
			</div>
			<div class="sexs">性别<div class="gender">男</div>
			</div>
			<div class="trade">交易量
				<div class="trades">420</div>
			</div>
		</div>
		<script src="js/dim.js"></script>
	</body>
</html>

js代码：

// 声明一个全局变量data来存储从服务器获取的数据 
let data;
let xhr = new XMLHttpRequest();
xhr.open('get', 'js/dim.json', true);
xhr.send();
xhr.onreadystatechange = function() {
	if (xhr.readyState == 4 && xhr.status == 200) {
		let text = xhr.responseText;
		console.log(text);
		data = JSON.parse(text);
		console.log(data);
		// 调用渲染函数
		list(data);
	}
};

// 封装函数
function list(data) {
	// 拼接姓名
	let str = '';
	// 拼接性别
	let stre = '';
	// 拼接交易量
	let strs = '';
	str += `<div class="names">姓名</div>`;
	stre += `<div class="sexs">性别</div>`;
	strs += `<div class="trade">交易量</div>`;
	// 遍历数组，拼接内容
	for (let i = 0; i < data.length; i++) {
		str += `<div class="monicker">${data[i].name}</div>`;
		// 使用三元表达式，条件1 判断sex的值是否为1，为1则是男生，否则是女生
		stre += `<div class="gender">${data[i].sex==1?`男`:`女`}</div>`;
		strs += `<div class="trades">${data[i].deal}</div>`
	};
	// 将拼接好的内容设置到对应的HTML元素中
	document.getElementsByClassName('names')[0].innerHTML = str;
	document.getElementsByClassName('sexs')[0].innerHTML = stre;
	document.getElementsByClassName('trade')[0].innerHTML = strs;
};
// 获取输入框
let inp = document.getElementsByClassName('inp')[0];
console.log(inp);

// 绑定onchange事件
function but() {
	console.log(data, inp.value);
	// 创建一个空数组用于存储过滤后的数据  
	var arr = [];
	// 遍历全局变量data中的数据
	for (var i = 0; i < data.length; i++) {
		// 检查数据中name属性是否包含输入框的值
		if (data[i].name.indexOf(inp.value) >= 0 || data[i].deal.toString().indexOf(inp.value) >= 0) {
			// 如果包含，则将数据添加到arr数组中
			arr.push(data[i]);
		};
	};
	// 打印结果
	console.log(arr);
	// 渲染页面
	list(arr);
};

上面的代码是通过假数据中的name和deal交易量来进行模糊搜索。

乐多_L

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用js实现input框的模糊搜索

json假数据：使用数组包对象的方法，在json中设置了三列数据，分别是：名称，性别和交易额。上面的代码是通过假数据中的name值来进行模糊搜索，我们也可以使用性别或交易额来进行模糊搜索，将if判断中的data[i].name换成性别或交易额就可以实现。使用简单的js代码就可以实现模糊搜索功能，使用indexOf属性。
复制链接

扫一扫