有关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 相关文章推荐
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
angular十大常见问题
Mar 07 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
详解CocosCreator消息分发机制
Apr 16 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
数据库的日期格式转换
2006/10/09 PHP
php 过滤器实现代码
2010/08/09 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
python使用Tkinter显示网络图片的方法
2015/04/24 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
python 默认参数相关知识详解
2019/09/18 Python
利用python实现AR教程
2019/11/20 Python
python获取linux系统信息的三种方法
2020/10/14 Python
Java语言程序设计测试题判断题部分
2013/01/06 面试题
清正廉洁演讲稿
2014/05/22 职场文书
装修施工安全责任书
2014/07/24 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书