有关suggest快速删除后仍然出现下拉列表的bug问题

写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问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 仿google搜索提示 SuggestFramework的使用

    一.首先来看一下什么是suggest framework Suggest Framework 故名思意,就是仿 Google Suggest 的一个小框架,让你的文本框也有提示功能.利用suggest framework你可以在自己的网站上很轻松实现"输入提示"效果,这种效果会很大程度上提高用户体验,提高搜索效率. 一个页面上可以出现多个搜索框,每个搜索框都可以实现单独配置. 此框架无浏览器限制,基本兼容当前的绝大多数浏览器,包括Internet Explorer 5+ (Win/Ma

  • JSuggest自动匹配下拉框使用方法(示例代码)

    1.下载jquery-latest.js,JSuggest.js和JSuggest.css JSuggest.js源代码如下 复制代码 代码如下: /*** * Description : JSuggest 下拉提示框*/ function JSuggest(){ // DIV下拉框this.div = null; // DIV下的ulthis.ul = null; // 文本输入框this.input = null; // 当前DIV所选的LI对象this.current_li = null;

  • suggestion开发小结以及对键盘事件的总结（针对中文输入法状态）

    suggestion开发小结以及对键盘事件的总结（针对中文输入法状态）

    重要的键盘事件: 事件顺序:keydown -> keypress ->keyup 对于输入法开启时: keypress: 这三个事件中最最特别的事件的说,如果巧妙运用可以事半功倍: 1. 首先对于大部分功能键是没有keypress事件的 Caps lock ,shift,alt,ctrl,num lock...庆幸的是enter拥有此事件 2. 对于字母,数字,press返回的keyCode是不可靠的 在IE和webkit 下 返回的是ASCII code firfox下永远返回0 但是 对

  • javascript suggest效果 自动完成实现代码分享

    javascript suggest效果 自动完成实现代码分享

    首先,用到的框架当然是我的框架mass Framework,当然你用其他框架也可以,如jQuery,没有什么复杂的东西.只要弄懂原理,一下子就能搞出来.想必,以后你们工作也遇到做搜索框的活儿. 由于本人没有后端,因此取用一个对象作为本地数据库.而我现在要做的,其实远远比suggest高级,类似IDE的语法提示的东西.当前成品已放到github上. 好了,我们动手吧.首先是结构层,装了FF的同学可以在百度首页查看源码,当输入几个字母时,会动态生成了那些HTML.不过怎么也好,其成就是一个DIV放到

  • inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)

    像QQ邮箱提示.百度的搜索框提示.淘宝的商品搜索提示等,现在有不少的网站都有类似效果,以提升用户体验. 使用方法: new InputSuggest({ input HTMLInputElement 必选 data Array ['sina.cn','sina.com','2008.sina.com','vip.sina.com.cn'] 必选 containerCls 容器className itemCls 容器子项className activeCls 高亮子项className width

  • ajax Suggest类似google的搜索提示效果

    实现: <script type="text/javascript" src="/path/to/SuggestFramework.js"></script> <script type="text/javascript">window.onload = initializeSuggestFramework;</script> 有了上面两句后,每个取了名的文本框会多出五个属性: 1.action 必须

  • Google Suggest ;-) 基于js的动态下拉菜单

    Google Suggest ;-) 基于js的动态下拉菜单

    基本的原理是在当前窗口创建了一个iframe,然后将相关关键词的提示列表在iframe中,并通过列表点选将选定项放到搜索框中.能这么快的能将所有相关关键词的检索数列出,看来所有的提示词已经提前进行了预搜索和数量记录.试了一下"sex",没有相关检索提示,看来对搜索词进行了严格的色情过滤. 另外:这一动态列表功能也应用在GMail的地址栏自动输入完成中,如图: Google自动完成的源代码如下:// Copyright 2004 and onwards Google Inc. var w

  • AJAX实现仿Google Suggest效果

    AJAX实现仿Google Suggest效果

    修复了一些细节代码(支持持续按键事件) *项目名称:AJAX实现类Google Suggest效果*作者:草履虫(也就是蓝色的ecma)*联系:caolvchong@gmail.com*时间:2007-7-7*工具: DreamWeaver(写ASP),Aptana(写Javascript,HTML和CSS),Emeditor(写这篇文章),Access2003(数据库)*测试平台:Firefox2.0,IE6.0,IE7.0*演示地址:http://finish.3322.org/sugges

  • 有关suggest快速删除后仍然出现下拉列表的bug问题

    写suggest的时候,有时我们快速删除输入框的文字后,但是suggest下拉列表还有出现,导致的原因是因为ajax异步请求造成的. 虽然我们把输入框的内容都删除了,甚至做了停止后续请求的相关操作,但是由于ajax是异步的,即使你停止了后续的操作,但是最后一次请求的数据还在回来的路上. 解决办法看代码: var inp = document.getElementById('inp'), timer = 0; inp.oninput = function (e) { var val = e.tar

  • Android studio 快速删除无用资源的方法

    Android studio 快速删除无用资源的方法

    1.在Anaylze中选择Run Inspection by Name... 2.在点击之后弹出的窗口输入unused resources后,回车 3.根据情况,选择情况,选择整个项目.指定Module...,也可以自己过滤.点击ok 4.得到结果,里面全是没用的文件.可以一个个删,也可以一次性删除 总结 以上所述是小编给大家介绍的Android studio 快速删除无用资源的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 您

  • Innodb中mysql快速删除2T的大表方法示例

    Innodb中mysql快速删除2T的大表方法示例

    前言 本文主要给大家介绍了关于Innodb中mysql快速删除2T的大表的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 来,先来看小漫画陶冶一下情操 OK,这里就说了.假设,你有一个表erp,如果你直接进行下面的命令 drop table erp 这个时候所有的mysql的相关进程都会停止,直到drop结束,mysql才会恢复执行.出现这个情况的原因就是因为,在drop table的时候,innodb维护了一个全局锁,drop完毕锁就释放了. 这意味着,如果在白天,访

  • Linux文件删除后空间未释放问题详解

    前言 当系统空间使用量过大需要清理空间或者清理某个文件时,有时会出现执行了删除命令之后磁盘空间并没有释放,很多人首次遇到该情况时会比较困惑,在考虑是不是像windows系统的回收站一样,删除只是逻辑删除到回收站一样?其实不然,linux的回收站功能想了解的可以与我沟通或查资料了解一下,也是个比较实用的方法,此处我们主要实践文件删除后空间未释放问题. 1. 实验准备 想模拟该场景的方式很多,主要是实现文件被占用的场景.最简单的方式是拷贝文件,另一个常见方式是对于会编程或shell功底较好的同学可以

  • MySQL 快速删除大量数据（千万级别）的几种实践方案详解

    笔者最近工作中遇见一个性能瓶颈问题,MySQL表,每天大概新增776万条记录,存储周期为7天,超过7天的数据需要在新增记录前老化.连续运行9天以后,删除一天的数据大概需要3个半小时(环境:128G, 32核,4T硬盘),而这是不能接受的.当然如果要整个表删除,毋庸置疑用 TRUNCATE TABLE就好. 最初的方案(因为未预料到删除会如此慢),代码如下(最简单和朴素的方法): delete from table_name where cnt_date <= target_date 后经过研究,

  • IDEA插件之快速删除Java代码中的注释

    IDEA插件之快速删除Java代码中的注释

    背景 有时,我们需要删除Java源代码中的注释.目前有不少方法,比如: 实现状态机.该方式较为通用,适用于多种语言(取决于状态机支持的注释符号). 正则匹配.该方式容易误判,尤其是容易误删字符串. 利用第三方库.该方式局限性较强,比如不同语言可能有不同的第三方库. 本文针对Java语言,介绍一种利用第三方库的方式,可以方便快速地移除代码中的注释. 原理 这个第三方库叫做JavaParser.它可以分析Java源码,并生成语法分析树(AST),其中注释也属于AST中的节点. 因此核心思路即为: J

  • MySQL 超大表快速删除方式

    目录 MySQL 超大表快速删除 表创建一个硬链接 执行表删除 执行文件删除 MySQL快速清空大表数据 清空表数据的五种方式 清空表数据语法 MySQL 超大表快速删除 MySQL里面直接对大表执行drop table删除有可能导致MySQL Hang住,对业务造成影响.删除超大表的前提是该表是独立表空间,这样删除才有效. 表创建一个硬链接 # du -sh pay_bills.ibd  175G        pay_bills.ibd # 创建硬链接 # ln pay_bills.ibd

  • oracle快速删除重复的记录

    正在看的ORACLE教程是:oracle快速删除重复的记录.做项目的时候,一位同事导数据的时候,不小心把一个表中的数据全都搞重了,也就是说,这个表里所有的记录都有一条重复的.这个表的数据是千万级的,而且是生产系统.也就是说,不能把所有的记录都删除,而且必须快速的把重复记录删掉. 对此,总结了一下删除重复记录的方法,以及每种方法的优缺点. 为了陈诉方便,假设表名为Tbl,表中有三列col1,col2,col3,其中col1,col2是主键,并且,col1,col2上加了索引. 1.通过创建临时表

  • MySQL实现快速删除所有表而不删除数据库的方法

    本文实例讲述了MySQL实现快速删除所有表而不删除数据库的方法.分享给大家供大家参考,具体如下: 如果直接使用phpmyadmin操作的话肯定非常简单,勾选数据表->点击删除->点击确定,操作完毕! 这里介绍一下快速删除数据表的SQL命令操作方法. 删除表的命令: drop table 表名; 如果有200张表,执行200次,想想就不想动手了. 下面提供一个使用information_schema库的方案: 复制代码 代码如下: SELECT CONCAT('drop table ',tabl

  • vue主动刷新页面及列表数据删除后的刷新实例

    1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. App.vue: 声明reload方法,控制

随机推荐