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
input输入框实现联想关键词功能的更多相关文章
- JavaScript实现input输入框限制输入值的功能
限制只能输入正整数 <input type="text" onkeyup="if(this.value.length==1){this.value=this.val ...
- input输入框联想功能
一直想找一个可以连接后台,可以根据后台内容的input输入框,可以实现联想功能,网上找到一个简单的静态页面的输入框联想,经过一番修改之后终于可以实现读取自己定义的数组的联想了,其实也比较简单就是格式的 ...
- 实现bootstrap布局的input输入框中的图标点击功能
使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...
- input autocomplete属性设计输入框自动联想（php实现）
因为客户临时要求加一个输入框自动联想,就开始了解这块.结合网上总结最难的一点就是找好对应的js版本以及相应的jQuery-ui: 以下是我用的版本,以及连接地址: jQuery的js文件: <s ...
- 使用juqery-ui完成联想查询功能
最近公司的项目有个需求,需要使用联想查询功能.就是一个文本输入框,在输入的时候获取值去后端模糊查询然后按照列表显示在下面.效果如下图: 经过搜索找到这个插件,查阅资料可以完成这个功能,即可以实现静态数 ...
- Input输入框输入银行卡号自动空格
input输入框是表格中用都最多的,像输入手机,密码,银行卡号的,很多对于输入银行卡号是没有处理的,比如这样~~ 看起来是不是一团乱麻,, 眼睛瞬间一片漆黑~ 如果是这样,会不会好很多呢~~ 其实逻 ...
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn ...
- 【前端开发】解决ios设备上fixed浮动的input输入框兼容问题
我们在开发移动端页面时,经常会存在这种需求,在页面顶部或底部有一个输入框,一直浮动在顶部或底部位置,中间部分的内容是可以滚动的.比如底部输入框的搜索功能,或底部输入框的写评论功能. 这种问题,我们一般 ...
- 微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
随机推荐
- leetcode-mid-backtracking -22. Generate Parentheses-79 Word Search -NO
mycode 错误,因为借鉴了Number of Islands问题中的方法,导致在for循环中即使已经出现了答案,也还会继续遍历.但是两个题目的不同时,island需要找出所有的情况,这个题只需 ...
- ORACLE同义词使用
多用户协同开发中,可以屏蔽对象的名字及其持有者.如果没有同义词,当操作其他用户的表时,必须通过user名.object名的形式,采用了Oracle同义词之后就可以隐蔽掉user名, 当然这里要注意的是 ...
- maven之阿里云Maven镜像的使用
Maven中央仓库在国外,速度比较慢,所以我们采用国内的镜像,速度回有质的提升. 配置下setting.xml <mirrors> <mirror> <id>ali ...
- 文件的权利和sudoers中规定的权限哪个更大?
文件的权利和sudoers中规定的权限哪个更大? 当然是文件的权限更大!!! 这也是linux的 更安全的根本所在! 就是它的每一个文件都有严格的 rwxr--r-- 权限规定. 只有文件权限规定了的 ...
- EMQ插件通过HTTP连接认证服务器实现认证
需求 在EMQ中添加认证插件,将到来的MQTT连接的ClientID.UserName.Password通过HTTP协议发送到认证服务器,用返回的数据决定是否允许该连接: 在连接时和断开时向服务器发送 ...
- （转）深入理解Java：注解（Annotation）自定义注解入门
向作者致敬! 转自:http://www.cnblogs.com/peida/archive/2013/04/24/3036689.html 要深入学习注解,我们就必须能定义自己的注解,并使用注解,在 ...
- Django聚合数据
背景: 有些时候,光靠数据库中已有字段的数据,还不足以满足一些特殊场景的需求,例如显示一个作者的所有书籍数量. 这时候就需要在已有数据基础上,聚合出这些没有的数据. 为查询集生产聚合: Django ...
- 25. Reverse Nodes in k-Group[H]k个一组翻转链表
题目 Given a linked list, reverse the nodes of a linked list k at a time and return its modified list. ...
- MSSQL注入--反弹注入
明明是sql注入的点,却无法进行注入,注射工具拆解的速度异常的缓慢,错误提示信息关闭,无法返回注入的结果,这个时候你便可以尝试使用反弹注入, 反弹注入需要依赖于函数opendatasource的支持, ...
- java 中的equals()小结
转载自http://www.cnblogs.com/jackyrong/archive/2006/08/20/481994.html Java中的equals是十分重要的,和= =要区别开来,最近在看 ...