有关suggest快速删除后仍然出现下拉列表的bug问题


Posted in Javascript onDecember 02, 2016

 写suggest的时候,有时我们快速删除输入框的文字后,但是suggest下拉列表还有出现,导致的原因是因为ajax异步请求造成的。

虽然我们把输入框的内容都删除了,甚至做了停止后续请求的相关操作,但是由于ajax是异步的,即使你停止了后续的操作,但是最后一次请求的数据还在回来的路上。

解决办法看代码:

var inp = document.getElementById('inp'),
timer = 0;
inp.oninput = function (e) {
var val = e.target.value;
var f = function () {
alert(val)
}
if (val === '') {
f = function () {
console.log('setState = []');
}
}
clearTimeout(timer);
timer = setTimeout(function () {
f();
}, 400);
}

我这里贴的代码只是解决思路,把获取到请求回来的数据后续的相关操作先封装到函数里,当检测到value为空的时候,把函数的操作变化一下,就不会出现suggest数据框了。

以上所述是小编给大家介绍的有关suggest快速删除后仍然出现下拉列表的bug问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用javascript实现给图片加链接
Aug 15 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 #Javascript
搭建Bootstrap离线文档的方法
Dec 02 #Javascript
巧用Javascript的逻辑运算符
Dec 02 #Javascript
Vue.js第四天学习笔记(组件)
Dec 02 #Javascript
Javascript之面向对象--接口
Dec 02 #Javascript
Javascript之面向对象--封装
Dec 02 #Javascript
JavaScript制作弹出层效果
Dec 02 #Javascript
You might like
几个学习PHP的网址
2006/11/25 PHP
php中处理模拟rewrite 效果
2006/12/09 PHP
php模板之Phpbean的目录结构
2008/01/10 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
用js来解决ajax读取页面乱码
2010/11/28 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
vue路由的配置和页面切换详解
2020/09/09 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
python的类方法和静态方法
2014/12/13 Python
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
中专生毕业个人鉴定
2014/02/26 职场文书
工作推荐信范文
2014/05/10 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
网络研修随笔感言
2015/11/18 职场文书