搜索框输入即时提示

最新推荐文章于 2023-01-06 10:13:10 发布

夏尔の

最新推荐文章于 2023-01-06 10:13:10 发布

阅读量2.8k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_16371909/article/details/78911742

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

对于web用户而言，在搜索或者填写一些输入框的时候如果能有相应的输入提示或者即时的候选项，将会感到十分的省心。

当需要查询的数据量很大的时候，尽可能的减少网络请求次数对前端和后端都是必要的，这篇文章即是对即时搜索做的一些优化。废话不多说，直接贴我的代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>即时搜索小优化</title>
	</head>

	<body>
		<input type="text" id="query" />
	</body>

	<script>
		window.onload = function() {
			var oQuery = document.getElementById("query");
			/*第一版---按键按下的时候即发起请求
			 * 以搜索“谷歌”为例，这里发起五次请求（拼音输入法）
			oQuery.οnkeyup=function(){
				Query();
			}*/

			/*第二版加了一个延迟，这样用户在输入一个完整的字符的时候，不会每按下一个字母都发起一次请求
			 同样以搜索“谷歌”为例，这里只发起一次请求（拼音输入法，正常打字速度）
			 * */
			var timer = 0;

			oQuery.onkeyup = function() {
				clearTimeout(timer);
				timer = setTimeout(function() {
					Query();
				}, 250);
			}

			function Query() {
				console.log("查询数据");
			}

		}
	</script>

</html>

这一个小小的优化，就将搜索次数减少了四次。

勿以善小而不为啊！

夏尔の

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
搜索框输入即时提示

对于web用户而言，在搜索或者填写一些输入框的时候如果能有相应的输入提示或者即时的候选项，将会感到十分的省心。当需要查询的数据量很大的时候，尽可能的减少网络请求次数对前端和后端都是必要的，这篇文章即是对即时搜索做的一些优化。废话不多说，直接贴我的代码。即时搜索小优化 window.onload = function() { var o
复制链接

扫一扫