有关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 相关文章推荐
js 实现日期灵活格式化的小例子
Jul 14 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
vue实现虚拟列表功能的代码
Jul 28 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
原生JavaScript实现随机点名表
Jan 14 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
web方式ftp
2006/10/09 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
js中日期的加减法
2015/05/06 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python实现截屏的函数
2015/07/26 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Python jieba库用法及实例解析
2019/11/04 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
人力资源行政经理自我评价
2013/10/23 职场文书
小学数学教学反思
2014/02/02 职场文书
主持人演讲稿
2014/05/13 职场文书
企业标语口号
2014/06/10 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技