有关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表单常用验证集合
Jan 16 Javascript
javascript 添加和移除函数的通用方法
Oct 20 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
jQuery取id有.的值的方法
May 21 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
vue实现引入本地json的方法分析
Jul 12 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
django定期执行任务(实例讲解)
2017/11/03 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
分享vim python缩进等一些配置
2018/07/02 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
Python的高阶函数用法实例分析
2019/04/11 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
如何利用find命令查找文件
2015/02/07 面试题
小学教师培训方案
2014/06/09 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
投诉信格式范文
2015/07/02 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
Python中第三方库Faker的使用详解
2022/04/02 Python
利用Redis实现点赞功能的示例代码
2022/06/28 Redis