有关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 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 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
9个PHP开发常用功能函数小结
2011/07/15 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python计算对角线有理函数插值的方法
2015/05/07 Python
python获取中文字符串长度的方法
2018/11/14 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
python下载的库包存放路径
2020/07/27 Python
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
计算机专业大学生的自我评价
2013/11/14 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
经理任命书模板
2014/06/06 职场文书
个人存款证明书
2014/10/18 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
家庭贫困证明
2015/06/16 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript