有关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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
jquery validator 插件增加日期比较方法
Feb 21 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
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
thinkPHP自动验证机制详解
2016/12/05 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
python利用beautifulSoup实现爬虫
2014/09/29 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
python for 循环获取index索引的方法
2019/02/01 Python
python递归函数用法详解
2020/10/26 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
教师求职信范文分享
2013/12/27 职场文书
出国导师推荐信
2014/01/16 职场文书
群众路线剖析材料
2014/02/02 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android