<!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实时查询，为空提示的更多相关文章

  1. java+数据库+D3.js 实时查询人物关系图

    先看下 效果 某个用户,邀请了自己的朋友 ,自己的朋友邀请了其他朋友,1 展示邀请关系,2 点击头像显示邀请人和被邀请人的关系.(网上这种资料很少, 另外很多都是从JSON文件取 数据, 这里是从数据 ...

  2. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  3. SQL Server2016 新功能实时查询统计信息

    SQL Server2016 新功能实时查询统计信息 很多时候有这样的场景,开发抱怨DBA没有调优好数据库,DBA抱怨开发写的程序代码差,因此,DBA和开发都成为了死对头,无法真正排查问题. DBA只 ...

  4. 一步一步跟我学习lucene（19）---lucene增量更新和NRT(near-real-time)Query近实时查询

    这两天加班,不能兼顾博客的更新.请大家见谅. 有时候我们创建完索引之后,数据源可能有更新的内容.而我们又想像数据库那样能直接体如今查询中.这里就是我们所说的增量索引.对于这种需求我们怎么来实现呢?lu ...

  5. c#程序中使用"like“查询access数据库查询为空的问题

    今天,在开发的过程中发现了一个特别奇怪的问题:access中like查询时候,在Access数据库中执行,发现可以查询出结果,这是在数据库上执行,select * from KPProj where ...

  6. 使用 iosOverlay.js 创建 iOS 风格的提示和通知

    iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼 ...

  7. js判断是否为空火undefined是否给undefined加引号

    js判断是否为空为undefined如果判断的是类型则用typeof(),如果其本身就是“undefind”字符窜,则不能这样判断, 这样typeof之后是字符串类型就判断不出来了,这是需要去掉typ ...

  8. 在MyEclipse中如何去掉JS或jsp语法错误提示!

    在MyEclipse中如何去掉JS或jsp语法错误提示! 关于在 MyEclipse 上 WEB 工程里面的 JS/JSP 经常会有语法错误提示,这是由于 MyEclipse 对其语法要求相当严格所造 ...

  9. memcache锁,解决查询过多email查询为空的问题

    /* 设置memcache锁,解决查询过多email查询为空的问题 Begin */ $mmc = new Memcache; $mmc->connect('127.0.0.1', 11211) ...

随机推荐

  1. 怎样将 GB2312 编码的字符串转换为 ISO-8859-1 编码的 字符串？

    String s1 = "你好"; String s2 = new String(s1.getBytes("GB2312"), "ISO-8859-1 ...

  2. session与cookie的区别？ 如果客户端禁止 cookie session 还能用吗？

    一.session与cookie的区别 session:Session 是存放在服务器端的,类似于Session结构来存放用户数据,当浏览器 第一次发送请求时,服务器自动生成了一个Session和一个 ...

  3. 转：C++初始化成员列表

    转载至:https://blog.csdn.net/zlintokyo/article/details/6524185 C++初始化成员列表和新机制初始化表达式列表有几种用法: 1.如果类存在继承关系 ...

  4. Spark学习摘记 —— RDD转化操作API归纳

    本文参考 在阅读了<Spark快速大数据分析>动物书后,大概了解到了spark常用的api,不过书中并没有给予所有api具体的示例,而且现在spark的最新版本已经上升到了2.4.5,动物 ...

  5. scanf()函数的原理

    最近使用scanf发现了自己对scanf函数还是不太了解,主要出现在无意中出现的一个错误: scanf正确的写法是,scanf中以什么格式输入变量,则变量的类型就应该是什么格式,如下面scanf输入到 ...

  6. USB与电池切换电路图

  7. CSS 面试题总结

    CSS 中类 (classes) 和 ID 的区别. 书写上的差别:class名用"."号开头来定义,id名用"#"号开头来定义: 优先级不同(权重不同) 调用 ...

  8. 如何更愉快地使用rem —— 别说你懂CSS相对单位

    前段时间试译了Keith J.Grant的CSS好书<CSS in Depth>,其中的第二章<Working with relative units>,书中对relative ...

  9. D3.js中国地图下钻

    使用d3.js实现中国地图及中国地图下钻到省市区 在可视化开发中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市,看到区这样的下钻过程,今天我们就来实现这个效果. ...

  10. 访问控制protected是不同包中对子类可见，什么意思？

    2.2 以下例子说明:protected是不同包中对子类可见,对非子类不可见. 例1.2.2.a:---本例为正常用法. package p1;public class A {    protecte ...