有关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 15 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP7引入的"??"和"?:"的区别讲解
2019/04/08 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
带薪年假请假条
2014/02/04 职场文书
建议书怎么写
2014/03/12 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
2014年教务工作总结
2014/12/03 职场文书
工程部经理岗位职责
2015/02/02 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js