有关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去除空格的几种方法
Oct 03 Javascript
extjs grid取到数据而不显示的解决
Dec 29 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
React优化子组件render的使用
May 12 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
Javascript confirm多种使用方法解析
Sep 25 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自动跳转中英文页面
2008/07/29 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
Python 列表(List)操作方法详解
2014/03/11 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
微信公众号token验证失败解决方案
2019/07/22 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
Python读取表格类型文件代码实例
2020/02/17 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
电视购物广告词
2014/03/19 职场文书
求职信范文大全
2014/05/26 职场文书
校园活动策划方案
2014/06/13 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
团员年度个人总结
2015/02/26 职场文书
二手房购房意向书
2015/05/09 职场文书
房屋维修申请报告
2015/05/18 职场文书
让生命充满爱观后感
2015/06/08 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
Python如何导出导入所有依赖包详解
2021/06/08 Python
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis