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

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

<!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) 

 

我的淘宝店，可以进去逛逛噢：https://shop108912636.taobao.com/index.htm?spm=2013.1.w5001-7867000954.3.1d29318dPlLar7&scene=taobao_shop

 

posted @ 2017-07-28 20:48  piwenfei  阅读(2267)  评论(0)  编辑  收藏  举报