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

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

input输入框实现联想关键词功能的更多相关文章

  1. JavaScript实现input输入框限制输入值的功能

    限制只能输入正整数 <input type="text" onkeyup="if(this.value.length==1){this.value=this.val ...

  2. input输入框联想功能

    一直想找一个可以连接后台,可以根据后台内容的input输入框,可以实现联想功能,网上找到一个简单的静态页面的输入框联想,经过一番修改之后终于可以实现读取自己定义的数组的联想了,其实也比较简单就是格式的 ...

  3. 实现bootstrap布局的input输入框中的图标点击功能

    使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...

  4. input autocomplete属性设计输入框自动联想（php实现）

    因为客户临时要求加一个输入框自动联想,就开始了解这块.结合网上总结最难的一点就是找好对应的js版本以及相应的jQuery-ui: 以下是我用的版本,以及连接地址: jQuery的js文件: <s ...

  5. 使用juqery-ui完成联想查询功能

    最近公司的项目有个需求,需要使用联想查询功能.就是一个文本输入框,在输入的时候获取值去后端模糊查询然后按照列表显示在下面.效果如下图: 经过搜索找到这个插件,查阅资料可以完成这个功能,即可以实现静态数 ...

  6. Input输入框输入银行卡号自动空格

    input输入框是表格中用都最多的,像输入手机,密码,银行卡号的,很多对于输入银行卡号是没有处理的,比如这样~~ 看起来是不是一团乱麻,, 眼睛瞬间一片漆黑~  如果是这样,会不会好很多呢~~ 其实逻 ...

  7. 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下     效果图   // JavaScript Document (function($){ $.fn ...

  8. 【前端开发】解决ios设备上fixed浮动的input输入框兼容问题

    我们在开发移动端页面时,经常会存在这种需求,在页面顶部或底部有一个输入框,一直浮动在顶部或底部位置,中间部分的内容是可以滚动的.比如底部输入框的搜索功能,或底部输入框的写评论功能. 这种问题,我们一般 ...

  9. 微信小程序基础之input输入框控件

    今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...

随机推荐

  1. 在vi vim中使用正则表达式与 普通perl正则的区别?

    参考这篇文章很好 vim中的正则表达式常用的命令有种, 即搜索和替换 /: 搜索 :s 替换 在vim中的正则表达式和perl编程的正则表达式还是有区别的: 正则表达式中的内容包括: 字面字符... ...

  2. 旋转数组 空间复杂度为O(1) 的2 种方法 + 1种空间复杂度O(n)

    题目地址 : 旋转数组. 网上好多不是根本就是错的,就是空间复杂度不是真正为1 下面总结一下 方法1 普通方法(空间复杂度不满足要求,但是题目并不会判错,说明他们没用对空间进行校验) ··· publ ...

  3. leetcode 1122. 数组的相对排序 (python)

    1.题目描述 给你两个数组,arr1 和 arr2, arr2 中的元素各不相同arr2 中的每个元素都出现在 arr1 中对 arr1 中的元素进行排序,使 arr1 中项的相对顺序和 arr2 中 ...

  4. Html/CSS 初步介绍html和css部分重要标签

    &初步介绍html和css部分重要标签& 注:开头书写:<!DOCTYPE html>表明对应标准html代码 先行总结重点 下方给出具体 CSS: 1. position ...

  5. Mysql基本管理知识

    数据库的启动 [root@node80 ~]# /etc/init.d/mysqld start #mysqld是从安装包拷贝的mysql.server Starting MySQL. SUCCESS ...

  6. 【Struts2】工作流程

    转发两篇文章 一个请求在Struts2框架中的处理分为以下几个步骤: 1.客户端发出一个指向servlet容器的请求(tomcat): 2.这个请求会经过图中的几个过滤器,最后会到达FilterDis ...

  7. 【ABAP系列】SAP ABAP DOI展示EXCEL或WORD

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP DOI展示EX ...

  8. 【Qt开发】解决Qt程序在Linux下无法输入中文的办法

    解决Qt程序在Linux下无法输入中文的办法 一位网友问我如何在Linux的Qt的应用程序中输入中文,我一开始觉得不是什么问题,但是后面自己尝试了一下还真不行.不仅是Qt制作的应用程序,就连Qt Cr ...

  9. vue+sentry 前端异常日志监控

    敲代码最糟心不过遇到自己和测试的环境都OK, 客户使用有各种各样还复现不了的问题,被逼无奈只能走到这一步:前端异常日志监控! vue官方文档如下推荐: 就是说, vue有错误机制处理errorHand ...

  10. [转帖]探秘华为（二）：华为和H3C（华三）的分道扬镳

    探秘华为(二):华为和H3C(华三)的分道扬镳 https://baijiahao.baidu.com/s?id=1620781715767053734&wfr=spider&for= ...