有关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 学习小结(适合新手参考)
Jul 30 Javascript
javascript的内存管理详解
Aug 07 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
JS高级运动实例分析
Dec 20 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
JS array数组检测方式解析
May 19 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无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
JS 有名函数表达式全面解析
2010/03/19 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
python处理xml文件的方法小结
2017/05/02 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
python tkinter实现屏保程序
2019/07/30 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
python异步Web框架sanic的实现
2020/04/27 Python
Python新手学习标准库模块命名
2020/05/29 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
在校生党员自我评价
2013/09/25 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
python实现A*寻路算法
2021/06/13 Python
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python