js实时查询，为空提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=width-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<title>实时查询</title>
<script src="../commonJs/jquery-3.1.0.min.js"></script>
<style>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
} body {
padding-top: 30px;
margin: 0 auto;
} ul {
width: 80%;
margin: 10px auto 0;
list-style: none;
} input {
display: block;
width: 80%;
padding: 5px;
margin: 0 auto;
outline: none;
}
p {
display: none;
text-align: center;
}
</style>
</head>
<body>
<input type="text" id="searchInput" placeholder="请输入查询信息"/>
<ul>
<li>A. you can <small>2020-09-10</small></li>
<li>B. you must can <small>星期四</small></li>
<li>C. try your best <small>下午，雨天</small></li>
<li>D. live your life without regret <small>工作记录</small></li>
</ul>
<p>没有查询结果</p>
<script>
$(function() {
$("#searchInput").keyup(function() {
var value = $(this).val(); // 获取搜索框的内容
var flag = true; // 控制为空提示
$("ul li").each(function() { // 对查询各个选项进行遍历
$(this).hide(); // 将各个选项设置隐藏
// $(this).text()获取项目<li>的文本，调用indexOf()，$.trim(value)去掉输入内容的左右空格，如何匹配，则显示相应选项，匹配不到结果为-1,条件等于0也成立是因为内容框没有结果时把选项都显示。
if ($(this).text().indexOf($.trim(value)) >= 0) {
$("p").hide(); // 若出现查询结果为空时，为空提示会显示，再次搜索到相应选项时，为空提示应该隐藏。
$(this).show(); // 根据搜索内容匹配选项，将选项显示
flag = false; // 改变为空控制条件，使得有选项符合查询条件不显示为空提示。
}
});
if(flag) {
$("p").show();
}
});
})
</script>
</body>
</html>
———— 就多尝试吧~求知精神会丰富你暂时空白的脑壳子的————
js实时查询，为空提示的更多相关文章
- java+数据库+D3.js 实时查询人物关系图
先看下 效果 某个用户,邀请了自己的朋友 ,自己的朋友邀请了其他朋友,1 展示邀请关系,2 点击头像显示邀请人和被邀请人的关系.(网上这种资料很少, 另外很多都是从JSON文件取 数据, 这里是从数据 ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- SQL Server2016 新功能实时查询统计信息
SQL Server2016 新功能实时查询统计信息 很多时候有这样的场景,开发抱怨DBA没有调优好数据库,DBA抱怨开发写的程序代码差,因此,DBA和开发都成为了死对头,无法真正排查问题. DBA只 ...
- 一步一步跟我学习lucene（19）---lucene增量更新和NRT(near-real-time)Query近实时查询
这两天加班,不能兼顾博客的更新.请大家见谅. 有时候我们创建完索引之后,数据源可能有更新的内容.而我们又想像数据库那样能直接体如今查询中.这里就是我们所说的增量索引.对于这种需求我们怎么来实现呢?lu ...
- c#程序中使用"like“查询access数据库查询为空的问题
今天,在开发的过程中发现了一个特别奇怪的问题:access中like查询时候,在Access数据库中执行,发现可以查询出结果,这是在数据库上执行,select * from KPProj where ...
- 使用 iosOverlay.js 创建 iOS 风格的提示和通知
iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼 ...
- js判断是否为空火undefined是否给undefined加引号
js判断是否为空为undefined如果判断的是类型则用typeof(),如果其本身就是“undefind”字符窜,则不能这样判断, 这样typeof之后是字符串类型就判断不出来了,这是需要去掉typ ...
- 在MyEclipse中如何去掉JS或jsp语法错误提示!
在MyEclipse中如何去掉JS或jsp语法错误提示! 关于在 MyEclipse 上 WEB 工程里面的 JS/JSP 经常会有语法错误提示,这是由于 MyEclipse 对其语法要求相当严格所造 ...
- memcache锁,解决查询过多email查询为空的问题
/* 设置memcache锁,解决查询过多email查询为空的问题 Begin */ $mmc = new Memcache; $mmc->connect('127.0.0.1', 11211) ...
随机推荐
- OOP 中的 组合、聚合和关联有什么区别？
如果两个对象彼此有关系,就说他们是彼此相关联的.组合和聚合是面向对象中 的两种形式的关联.组合是一种比聚合更强力的关联.组合中,一个对象是另一 个的拥有者,而聚合则是指一个对象使用另一个对象.如果对象 ...
- 学习git（一）
一.自动化运维 1.网络层(接入层.汇聚层.核心层): 1 LB+HA(L4.L7): 2 服务层(reverse proxy cache.应用层.web层.SOA层.分布式层.DAL): 3 数据层 ...
- 学习Redis（一）
一.NoSQL 1.NoSql介绍 1.not only SQL,非关系型数据库,它能解决常规数据库的并发.IO与性能的瓶颈 2.解决以下问题: ① 对数据库的高并发读写需求 ② 大数据的高效存储和访 ...
- 理解feof与EOF
feof(feof msdn) feof用于判断文件结尾.头文件<cstdio>.使用方法是feof(fp),fp为指向需要判断的文件的指针.如果不到文件结尾,返回0值:如果是文件结尾,返 ...
- 二十三、原理图和PCB交互式布局
上图 在原理图里面直接选择在PCB里面就可以移动了,大功告成
- 如何监控微信小程序HTTP请求错误
摘要: Fundebug的微信小程序错误监控插件更新至0.5.0,支持监控HTTP请求错误. 接入插件 接入Fundebug的错误监控插件非常简单,只需要下载fundebug.0.5.0.min.js ...
- JS 实现下拉框回显
JS 实现下拉框回显 学习内容: 需求 总结: 学习内容: 需求 用 JS 实现下拉框回显 实现代码 <!DOCTYPE html> <html lang="en" ...
- 彻底理解volatile关键字
1. volatile简介 在上一篇文章中我们深入理解了java关键字,我们知道在java中还有一大神器就是关键volatile,可以说是和synchronized各领风骚,其中奥妙,我们来共同探讨下 ...
- AcWing 1220. 生命之树
题目链接 题目描述: 在X森林里,上帝创建了生命之树. 他给每棵树的每个节点(叶子也称为一个节点)上,都标了一个整数,代表这个点的和谐值. 上帝要在这棵树内选出一个非空节点集 S,使得对于 S 中的任 ...
- 帝国cms输出 自增数字 方法大全
帝国cms输出 自增数字 方法大全 1.帝国cms中调用序号 万能标签调用 使用:[!--no.num--] 标签模板: <li><span>[!--no.num--]< ...