码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-07-28 22:13:17      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:lan   闭包   cms   logs   set   java   har   lod   jquery   

实现原理很简单,代码如下:

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

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

标签:lan   闭包   cms   logs   set   java   har   lod   jquery   

原文地址:http://www.cnblogs.com/piwefei/p/7252532.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!