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) ...
随机推荐
- 构造器constructor是否可被重写override？
构造器不能被继承,因此不能被重写,但可以被重载.
- osi七层模型&tcp/udp
1.TCP/UDP协议 1.1 TCP协议 可靠,速度慢,全双工通信 建立连接三次握手,断开连接四次挥手 建立起链接之后,发送每条消息都有回执,为了保证数据的完整性,还有重传机制 数据传输:有收必有发 ...
- 学习zabbix（二）
超大规模门户网站集群架构: 运维30%的时间都在监控,监控要多维度: 监控(单机监控(系统监控).网络监控.应用监控.分布式监控): 业务监控(业务指标-->流量分析-->舆论监控): 流 ...
- 顺利通过EMC实验（13）
- PCB布线总的原则
转自张飞实战电子公众号 PCB布线总的原则 最短路径和减少干扰 PCB布线的总的流程大致如下: 1了解制造厂商的制造规范-线宽,线间距,过孔要求及层数要求: 2确定层数并定义各层的功能: 3设计布线规 ...
- 让IE兼容background-size的方法_background-size ie下使用
ie6,ie7,ie8下对css background-size并不支持,那么如何在ie下兼容background-size呢?在ie下把图片完整的居中显示在一定范围内在css中添加如下代码: fil ...
- Python中使用正则表达式获取两个字符中间部分
问题背景:当我们爬取网页信息时,对于一些标签的提取是没有意义的,所以需要提取标签中间的信息. 解决办法:用到了re包下的函数 方法1:用到了research()方法和group()方法 方法2:用到了 ...
- C2678 二进制“<”: 没有找到接受“const ***”类型的左操作数的运算符解决办法
正确代码如下:#include<iostream> #include<string> #include<map> using namespace std; /*仿函 ...
- js，nodejs如何判断文件是什么编码格式
nodejs编码只支持utf8的编码方式,无论是打开某个文件或者写.js脚本都得以utf8的编码方式保存,不然程序无法运行,读出来的文件是乱码. 如果是在前台,读取文件是通过FileReader或者F ...
- [转]Fabric2.3中使用test-network搭建测试网络
这个测试网络一方面可以用来学习Fabric,另一方面也可以让一些更有经验的开发者来测试他们的智能合约和应用,但是不建议用于生产环境,在2.0版本后,这个测试网络也取代了原来的"first-n ...