这个功能很有意思，下面我把我的示例给大家看看！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div id="tb">
			<img src="img/huoy.jpg" width="100%" height="100%"/>
		</div>
		<input id="su" placeholder="请输入搜素内容" oninput="sr()"/>
		<div id="xuanx">
			<p>序号</p>
			<p id="xing">姓名</p>
			<p id="jy" onclick="jiaoy()">交易量</p>
			<p id="gs">公司</p>
		</div>
		<div id="nrong">
			<div id="nrone">
				<p>1</p>
				<p>刘志杰</p>
				<p>999</p>
				<p>五头牛</p>
			</div>
		</div>
		<script src="js/index.js"></script>
	</body>
</html>
#tb{
	width: 100%;
	height: 150px;
	background-color: mediumpurple;
	text-align: center;
	font-size: 20px;
	line-height: 55px;
}
#tb img{
	background-size: 100%;
}
#nrong{
	width: 100%;
	height: 600px;
	background-color: lightskyblue;
	overflow: scroll;
}
#su{
	width: 30%;
	height: 30px;
	background-color:white;
	margin-left: 35%;
	color: rebeccapurple;
}
#xuanx{
	width: 100%;
	height: 80px;
	background-color: rgba(193, 193, 193, 0.2);
	display: flex;
	justify-content: space-around;
	line-height: 45px;
	font-size: 20px;
}
#nrone{
	width: 100%;
	height: 60px;
	background-color: slategray;
	display: flex;
	justify-content: space-around;
	font-size: 18px;
}

上面是基本样式，还是很不错的！

//声明一个全局变量 mg
let mg;
//获取HTML中的交易量;
let jy = document.getElementById('jy');
//获取HTML中的内容框;
let nrong = document.getElementById('nrong');
//获取input输入款;
let su = document.getElementById('su');
//声明new XMLHttpRequest;
let mh = new XMLHttpRequest();
//使用 open 方法指定要请求的地址、类型和方式;
mh.open('get', 'mohu.json', true);
//使用send方法发送请求;
mh.send();
//绑定 onreadystatechange 事件;
mh.onreadystatechange = function() {
	if (mh.readyState == 4 && mh.status == 200) {
		let text = mh.responseText;
		console.log(text);
		let data = JSON.parse(text);
		console.log(data);
		mh = data;
		wb(mh);
	}
}
//判断 readyState 和 status 的状态;
// 接收数据通过 json 转换使用，是用json将数据转化为js可用的形式;
//mg=请求过来的数据;
//调用wb渲染;

//渲染函数
//创建一个函数 函数名为wb
function wb(data) {
	let str = "";
	for (let i = 0; i < data.length; i++) {
		str += `<div id="nrone">
				<p>${[i+1]}</p>
				<p>${data[i].num}</p>
				<p>${data[i].volume}</p>
				<p>${data[i].firm}</p>
			</div>`;
	}
	nrong.innerHTML = str;
}
//声明一个空字符串;
//for循环 循环data数据;
//将自己创的jon数据与HTML的内容拼接;
//用innerHTHL给最外层的nrong进行渲染;

//声明一个全局变量jiao,变量值为 true(交易量);
let jiao = true;
//创建函数 函数名为jiao(){
function jiaoy() {
	jiao = !jiao;
	let arr = [];
	if (jiao == true) {
		arr = mh.sort(function(a, b) {
			return a.volume - b.volume;
		});
	} else {
		arr = mh.sort(function(a, b) {
			return b.volume - a.volume;
		});
	}
	wb(arr);
}
//通过点击让jiao的值取反 jiao = !jiao;
// 创建新的空数组
//if判断(变量值为true时){
//从小到大排序 赋值给新数组;
//	   }else{
//从大到小排序 赋值给新数组;
//     }
// 调用渲染函数 传递的数据是新数组;
//}


//创建函数 函数名为sr;
function sr() {
	let arr2 = [];
	let val = document.getElementById('su').value;
	for (let b = 0; b < mh.length; b++) {
		if (String(mh[b].num).indexOf(val) > -1 || String(mh[b].volume).indexOf(val) > -1 || String(mh[b].firm).indexOf(
				val) > -1) {
			arr2.push(mh[b]);
		}
	}
	wb(arr2);
}
//给input输入框绑定 oninput事件;
//声明一个空数组 arr2;
//声明一个变量 val 让它的值等于输入框的值;
//for 循环数据data;
//if 判断(姓名、交易量、公司的isdexof大于-1时){
//把这一数据放到新数组里;
//	}
//调用渲染函数 传递的数据是新数组;

这是写在js里的数据！

[{
	"num":"刘志杰",
	"volume":"999",
	"firm":"五头牛"
},
{
	"num":"王竹森",
	"volume":"899",
	"firm":"三只羊"
},
{
	"num":"王炸",
	"volume":"668",
	"firm":"五头牛"
},
{
	"num":"李炮",
	"volume":"558",
	"firm":"三只羊"
},
{
	"num":"小屁孩",
	"volume":"748",
	"firm":"一只鸡"
},
{
	"num":"小破孩",
	"volume":"957",
	"firm":"五头牛"
},
{
	"num":"小妮子",
	"volume":"967",
	"firm":"一只鸡"
},
{
	"num":"江流儿",
	"volume":"698",
	"firm":"三只羊"
},
{
	"num":"江河",
	"volume":"158",
	"firm":"三只羊"
},
{
	"num":"王山河",
	"volume":"258",
	"firm":"一只鸡"
},
{
	"num":"刘志",
	"volume":"624",
	"firm":"三只羊"
},
{
	"num":"刘杰",
	"volume":"325",
	"firm":"五头牛"
},
{
	"num":"冯子材",
	"volume":"681",
	"firm":"三只羊"
},
{
	"num":"冯源",
	"volume":"199",
	"firm":"三只羊"
},
{
	"num":"熊大",
	"volume":"919",
	"firm":"五头牛"
},
{
	"num":"熊二",
	"volume":"932",
	"firm":"一只鸡"
},
{
	"num":"光头强",
	"volume":"369",
	"firm":"三只羊"
},
{
	"num":"司马懿",
	"volume":"479",
	"firm":"三只羊"
},
{
	"num":"司马光",
	"volume":"874",
	"firm":"一只鸡"
},
{
	"num":"司马迁",
	"volume":"581",
	"firm":"三只羊"
},
{
	"num":"刘禅",
	"volume":"447",
	"firm":"三只羊"
},
{
	"num":"刘备",
	"volume":"789",
	"firm":"五头牛"
},
{
	"num":"马超",
	"volume":"339",
	"firm":"一只鸡"
},
{
	"num":"马子",
	"volume":"579",
	"firm":"三只羊"
},
{
	"num":"郝海燕",
	"volume":"589",
	"firm":"三只羊"
},
{
	"num":"崔有病",
	"volume":"249",
	"firm":"五头牛"
},
{
	"num":"崔油饼",
	"volume":"123",
	"firm":"三只羊"
},
{
	"num":"吕德华",
	"volume":"321",
	"firm":"一只鸡"
},
{
	"num":"吕布",
	"volume":"558",
	"firm":"五头牛"
},
{
	"num":"吕小布",
	"volume":"682",
	"firm":"五头牛"
}
]

这是json数据！

结构就这么多！