您的位置：首页 > 其它

input输入框实现联想关键词功能

2017-07-28 20:48 429 查看

实现原理很简单，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input输入框实现联想关键词功能</title>
<script src="http://www.kiscms.com/static/jquery-3.1.1.min.js"></script>
</head>
<body>
<input type="text" id="keyword">
<script type="text/javascript">
var input = $("#keyword");
input.keyup(function() {
var curKeyword = input.val();
console.log('send: '+curKeyword);
});
</script>
</body>
</html>

但是上面这个代码有瑕疵，用户在连续输入的过程中，每一次onkeyup都会发起一次请求，这样对服务器的压力很大，需要做优化。

利用javascript的闭包特性可以做到，当用户输入结束后才会发起请求，优化后的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input输入框实现联想关键词功能</title>
<script src="http://www.kiscms.com/static/jquery-3.1.1.min.js"></script>
</head>
<body>
<input type="text" id="keyword">
<script type="text/javascript">
var input = $("#keyword");
var lastKeyword = '';
input.keyup(function() {
var curKeyword = input.val();
lastKeyword = curKeyword;
setTimeout(function() {
console.log('lastKeyword: '+lastKeyword+' curKeyword: '+ curKeyword);
if(lastKeyword == curKeyword && curKeyword != '') {
console.log('send: '+curKeyword);
}
}, 500);
});
</script>
</body>
</html>

本人qq群也有许多的技术文档，希望可以为你提供一些帮助(非技术的勿加)。

QQ群： 281442983 (点击链接加入群：http://jq.qq.com/?_wv=1027&k=29LoD19)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航