有关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 IFrame 强制刷新代码
Jul 23 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
js实现图片360度旋转
Jan 22 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
ES6函数实现排它两种写法解析
May 13 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
安装APACHE
2007/01/15 PHP
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
php-app开发接口加密详解
2018/04/18 PHP
Javascript的并行运算实现代码
2010/11/19 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
Python加载带有注释的Json文件实例
2018/05/23 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
Python 判断奇数偶数的方法
2018/12/20 Python
Python异常处理例题整理
2019/07/07 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
教师评优的个人自我评价分享
2013/09/19 职场文书
学习雷锋活动总结
2014/04/29 职场文书
退学证明范本3篇
2014/10/29 职场文书
公司业务员管理制度
2015/08/05 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js