前端jquery搜索查询 优化网站性能

根据已加载出来的结果(列表、文章...),直接从这些结果中通过js、jquery等查找结果,不经过数据库:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>分页</title>
	<style>
		ul li{
			list-style-type: none;
		}
	</style>
</head>
<body>
	<p>前端搜索 查询 由已知的数据得出要查找的 || 分页请求搜索</p>
	<p>减少与数据库打交道,增加安全可靠性;同样也减小了数据库的负担;提高了效率</p>
	搜索:<input type="text" id="search">
	<ul id="record">
		<li>记录1</li>
		<li>记录2</li>
		<li>记录3</li>
		<li>记录4</li>
		<li>记录5</li>
		<li>记录6</li>
		<li>记录7</li>
		<li>记录8</li>
		<li>记录9</li>
		<li>记录10</li>
		<li>记录11</li>
		<li>记录12</li>
		<li>记录13</li>
		<li>记录14</li>
	</ul>

	<p>搜索结果</p>
	<p id="result"></p>
	<script src="jquery.min.js"></script>
	<script>
		$('#search').bind('keydown',function(event){
			if(event.keyCode == "13"){
				var i,flag = 0;
				
				var s = document.getElementById("search").value;
				var uls = document.getElementById("record");
				var lis = uls.getElementsByTagName("li");
				
				for(i = 0;i < lis.length;i++){
					var lic = lis[i].innerHTML;
					if(s == lic){
						document.getElementById("result").innerHTML = "result:"+ lic;
						flag = 1;
					}
				}

				if(flag == 0)
					document.getElementById("result").innerHTML = "result:未找到!";
			}
		});
	</script>
</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值