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

Posted 2020-09-30 piwenfei

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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)

以上是关于input输入框实现联想关键词功能的主要内容，如果未能解决你的问题，请参考以下文章

vue 实现通过字符串关键字符动态渲染 input 输入框

vue input输入框联想

Vue移动端项目——搜索联想建议功能的实现（结合watch属性和使用lodash防抖节流）

Selenium2+python自动化34-获取百度输入联想词