前端jquery搜索查询优化网站性能_前端搜索查询优化-优快云博客

本文链接：https://blog.youkuaiyun.com/spfLinux/article/details/77993441

根据已加载出来的结果（列表、文章...），直接从这些结果中通过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>