数据排序、模糊搜索总结

最新推荐文章于 2025-07-05 16:15:04 发布

原创最新推荐文章于 2025-07-05 16:15:04 发布 · 810 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#前端

功能总结专栏收录该内容

13 篇文章

订阅专栏

今天分析讲解一下数据排序和模糊搜索功能，首先我们看下图，下图是数据排序初始的样子，可以看到除了标题，右边还有一个输入框。当我们使用这个输入框，可以实时的将所搜索到的数据渲染到页面上

比如我们搜索一个2，它就会将身价有2的显示出来，同样搜索文字也是可以的。

功能概述

数据展示：以表格形式展示数据，包括序号、姓名和身价（单位：亿）等信息。
数据排序：用户可以点击 “身价（亿）” 列标题，切换数据的排序方式，实现身价从大到小或从小到大的排序。
模糊搜索：用户可以在搜索框中输入关键词，排行榜会实时筛选出包含该关键词的数据，无论是姓名还是身价信息中包含关键词的记录都会被展示出来。

具体代码结构

html：

<h1>排行榜</h1>
		<input type="text" placeholder="请输入搜索内容" oninput="search()" />
		<table>
			<thead>
				<tr class="header">
					<td>序号</td>
					<td>姓名</td>
					<td onclick="money_sort()">身价（亿）</td>
				</tr>
			</thead>
			<tbody>

			</tbody>
		</table>

这段 HTML 代码构建了排行榜的基本结构。使用<h1> 标题显示 “排行榜”，一个 <input> 元素作为搜索框，通过 oninput 事件绑定了 search 函数，实现实时搜索功能。一个 <table> 元素用于展示数据，其中 <thead> 包含表头信息，<tbody> 初始为空，后面会使用js拼接字符串将内容插入到页面中，也就是tbody。

css：

* {
				margin: 0;
				padding: 0;
			}

			h1 {
				width: 100%;
				text-align: center;
			}

			.in_title {
				width: 100%;
				height: 50px;
				display: flex;
				font-size: 18px;
				align-items: center;
				justify-content: space-around;
				font-weight: 800;
			}

			input {
				width: 10%;
				float: right;
				padding: 0px 5px 0px 5px;
				margin-right: 20px;
			}

			.content {
				width: 100%;
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}

			table {
				width: 100%;
			}

			tr {
				width: 100%;
				height: auto;
				text-align: center;
			}

			.header {
				font-size: 18px;
				font-weight: 600;
			}

			td {
				width: 30%;
				height: auto;
			}

css代码也就是修改一下样式，使之更清晰美观。大家可以按照自己的喜好来修改样式。

JavaScript：

let con = document.getElementsByClassName('content')[0];
			let data;
			// 生成一个 XMLHttpRequest 对象
			let xhr = new XMLHttpRequest();
			// open（请求类型是get，请求地址：文件位置写的是json文件，请求方式是true。表示是异步
			xhr.open('get', 'js/sort.json', true);
			// 接着发送请求
			xhr.send();
			// 该方法可以定义响应执行函数，当 readyState 属性发
			// 生变化时会自动调用该方法。
			xhr.onreadystatechange = function() {
				// ready是交互流程。5个阶段，if判断中意思是
				// 交互流程是否达到第五个阶段并且状态等于200请求成功
				if (xhr.readyState == 4 && xhr.status == 200) {
					// 响应文本（返回的数据）
					let text = xhr.responseText;
					// 把返回的json数据转换，并赋值到data变量
					data = JSON.parse(text);
					console.log(data);
					reader(data);
				}
			};

			// 渲染函数
			function reader(data) {
				let str = '';
				for (let i = 0; i < data.length; i++) {
					str += `
					<tr>
						<td>${i+1*1}</td>
						<td>${data[i].name}</td>
						<td>${data[i].money}</td>
					</tr>
					`;
				}
				document.getElementsByTagName('tbody')[0].innerHTML = str;
			}

			let arr = [];
			let n = 1;
			// 点击切换排序方式
			function money_sort() {
				arr = [];
				for (let i = 0; i < data.length; i++) {
					if (n % 2 == 0) {
						// sort排序从小到大
						data.sort(function(a, b) {
							return a.money - b.money;
						});
						arr.push(data[i]);
					} else {
						// sort排序从大到小
						data.sort(function(a, b) {
							return b.money - a.money;
						});
						arr.push(data[i]);
					}
				}
				n++;
				reader(arr);
			}

			// 模糊搜索
			function search() {
				console.log(1234);
				let inputval = document.getElementsByTagName('input')[0].value;
				arr = [];
				for (let i = 0; i < data.length; i++) {
					if (data[i].name.indexOf(inputval) > -1 || String(data[i].money).indexOf(inputval) > -1) {
						// 将符合条件的数据push进数组arrs里
						arr.push(data[i]);
					}
				}
				if (arr.length > 0) {
					reader(arr);
				} else {
					reader(data);
				}
			}

代码解释

首先在获取数据前，我们可以设置一个全局的data变量，来保证我们的json数据可以在全局获取的到。

数据获取：使用 XMLHttpRequest 对象从 js/sort.json 文件中获取数据。当数据获取成功时，将数据解析为 JavaScript 对象并存储在 data 变量中，然后调用 reader 函数渲染数据。
渲染函数 reader：遍历数据数组，生成包含序号、姓名和身价信息的表格行 HTML 字符串，并将其赋值给 <tbody> 的 innerHTML，实现数据的展示。
排序函数 money_sort：每次点击 “身价（亿）” 列标题时调用该函数。通过一个计数器 n 来切换排序方式，当 n 为偶数时，使用 data.sort 方法按照身价从小到大排序；当 n 为奇数时，按照身价从大到小排序。排序后将数据存储在 arr 数组中，并调用 reader 函数更新表格显示。
搜索函数 search：当用户在搜索框中输入内容时调用该函数。获取输入框的值 inputval，遍历数据数组，检查姓名或身价信息中是否包含该关键词。如果包含，则将该数据项添加到 arr 数组中。最后，根据 arr 数组的长度判断是否有符合条件的数据，若有则调用 reader 函数展示搜索结果，否则展示原始数据。