阅读排行

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)

文章来自：http://www.cnblogs.com/piwefei/p/7252532.html