如何用JS实现模糊查询功能

聂聂脸

已于 2023-11-27 10:28:18 修改

阅读量527

点赞数 9

文章标签： javascript 前端 java

于 2023-11-27 10:13:48 首次发布

本文链接：https://blog.csdn.net/2301_79420857/article/details/134637633

版权

我是写的是JSON数据通过请求来获取，实现这个模糊查询功能我只用了indexOf返回数组下标这一种办法。方法不限，下面我只展示这一种方法喽！

indexOf是什么

indexOf是返回指定内容在原字符串中的位置，该方法是从数组的start处或数组的开头中检索，看看是否有对应的元素。如果找到inem就会返回这个item第一次出现的位置，如果找不到就会返回-1。

参数值

item：我们要查找的元素。

start：是可选的整数参数，规定在数组中开始检索的位置。它的取值是0到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

功能很简单主要就是排序和查找

我们来看功能的需求：

1.点击交易额时数据会从小到大排序

2.再次点击交易额时数据会从大到小排序

3.在输入框内输入我们要查询的内容会立刻做出反应

html代码：

给表单元素绑定了oninput事件

<body>
		<div class="big">
			<div class="first">
				<p>序号</p>
				<p>姓名</p>
				<div onclick="nover()">
					<p>交易额</p>
				</div>
			</div>

			<form id="put" oninput="puts()">
				查询：<input type="text" />
			</form>

			<hr />
			<div class="second"></div>
		</div>

		<script src="js/dim.js"></script>
	</body>

css代码：

* {
	margin: 0;
	padding: 0;
}

.big {
	font-family: 宋体;
	color: azure;
	width: 50%;
	height: 800px;
	margin: 30px;
	background-color: darkolivegreen;
}

.first {
	font-size: 25px;
	display: flex;
	justify-content: space-between;
	margin-left: 5%;
	width: 90%;
	height: 30px;
	padding-top: 15px;
	/* background-color: darkseagreen; */
}

hr{
	margin-top: 20px;
}

.second{
	padding-top: 20px;
}

.item {
	display: flex;
	justify-content: space-between;
	width: 85%;
	height: 60px;
	margin-left: 7%;
	float: left;
}

p {
	display: block;
}

form {
	margin-top: 15px;
	margin-left: 65%;
}

JS代码：

let data = [];
// 创建XMLHttpRequest 对象，名为xml
let xml = new XMLHttpRequest();
// 使用open方法指定要请求的地址类型和方式
xml.open("get", "./js/dim.json");
// 使用send方法发送请求
xml.send();
// 绑定onreadystatechange事件，判断rreadState和status的状态
xml.onreadystatechange = function() {
	// 判断xml的交互流程进行到底四个阶段并且xml响应状态码是200的时候
	if (xml.readyState == 4 && xml.status == 200) {
		let text = xml.responseText;
		// 接收数据，JSON转换使用
		data = JSON.parse(text);
		// 调用rander渲染函数
		rander();
	}
}
// 获取的是页面上的序号姓名交易额的值
let second = document.getElementsByClassName('second')[0];
// console.log(second);

// 渲染函数
// 渲染函数 函数名rander
function rander() {
	// 创建一个空字符串 名为str
	let str = "";
	// for循环整个data数据
	for (let i = 0; i < data.length; i++) {
		// str拼接`结构`
		str += `<div class="item">
				<p>${i+1}</p>
				<p>${data[i].name}</p>
				<p>${data[i].jma}</p>
			</div>`
	}
	// 用innerHTML的把名字和渲染到second中
	second.innerHTML = str;
}
rander();

// 获取数组指定元素索引的办法
// 数组data.indexof（）
let put = document.getElementById('put')[0];
console.log(put);

// 查询框
function puts() {
	let puts = document.getElementById('put')[0].value;
	let str = '';
	for (let i = 0; i < data.length; i++) {
		// 强制转换为字符串（寻找input的框的值的下标（数据的下标的交易量））
		// 查找的是jma交易量的下标（想要搜索名字还要添加name）来个或者
		if (String(data[i].jma).indexOf(puts) > -1 || String(data[i].name).indexOf(puts) > -1) {
			str += `<div class="item">
				<p>${i+1}</p>
				<p>${data[i].name}</p>
				<p>${data[i].jma}</p>
			</div>`
		}
		// 拼接到内容中的second
		second.innerHTML = str;
		console.log(String(data[i].jma).indexOf(puts) > -1);
	}
}

// 点击交易额排序

// let一个变量给他一个状态
let con = false;
// 交易额点击事件 函数名为nover
function nover() {
	con = !con;
	if (con) {
		// 数据sort排序（函数（a，b））
		data.sort(function(a, b) {
			// 注意:
			// 返回的值应该是aJSON交易额-bJSON交易额
			// return b.交易额的名字 - a.交易额的名字;
			return a.jma - b.jma;
		})
	} else {
		data.sort(function(a, b) {
			return b.jma - a.jma;
		})
	}
	rander();
	console.log("排序");
}

JSON数据我就不展示了，大家自己随便写一点，主要目的就是为了实现这个功能。当然方法还有很多，我只使用了其中的一种。有其他方法也可以跟我分享一下！