<!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. 如何在 Windows 和 Linux 上查找哪个线程使用的 CPU 时 间最长？

    使用 jstack 找出消耗 CPU 最多的线程代码

  2. 使用jquery

    在https://jqueryui.com/download/把样式下载下来 然后解压复制到之前的文件夹里面 再到https://jqueryui.com/tabs/#mouseover里面找到一段代 ...

  3. Mybatis 开发 dao 的方法

    1.分析SqlSession使用范围 1.1.SqlSessionFactoryBuilder 通过 SqlSessionFactoryBuilder 创建会话工厂 SqlSessionFactory ...

  4. C语言中的 @ 符号是什么意思?

    Global Variable Address Modifier (@address)You can assign global variables to specific addresses wit ...

  5. 13_奈奎斯特稳定性判据_Nyquist Stability Criterion_Part 1

    A曲线内有4个极点两个零点,则B曲线绕(0,0)逆时针两圈 A曲线是nyqyict contour中的曲线,P是A曲线内的()极点个数,Z是()极点个数,N是曲线B逆时针围绕(-1,0)的圈数 没过( ...

  6. Spring Security OAuth 笔记

    1  单点登录 关于单点登录的原理,我觉得下面这位老哥讲的比较清楚,有兴趣可以看一下,下面我把其中的重点在此做个笔记总结 https://juejin.cn/post/6844904079274197 ...

  7. Day10 - JS 实现 Checkbox 中按住 Shift 的多选功能

    Day10 - JS 实现 Checkbox 中按住 Shift 的多选功能 作者:liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战.项目免费提供了 3 ...

  8. 讲清楚之 javascript 参数传值

    讲清楚之 javascript 参数传值 参数传值是指函数调用时,给函数传递配置或运行参数的行为,包括通过call.apply 进行传值. 在实际开发中,我们总结javascript参数传值分为基本数 ...

  9. Java 值传递 or 引用传递？

    Java 方法传参 值传递 or 引用传递? 结论:Java采用的是值传递 先建立一些基础的概念 什么是值传递和引用传递? 值传递(pass by value):是指在调用函数时将实际参数复制一份传递 ...

  10. 【代码大全2 学习笔记】ADT 抽象与封装

    ADT abstract data type 抽象数据类型 要理解面向对象编程,就要先理解ADT这个概念.不懂ADT的程序员开发出来的类只是名义上的"类"而已--只是单纯的把一些相 ...