<!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. Homebrew安装环境

    p.p1 { margin: 0; font: 11px Menlo; color: rgba(0, 0, 0, 1) } span.s1 { font-variant-ligatures: no-c ...

  2. scrapy--使用案例

    1.scrapy框架 1.1 安装scrapy pip3 install wheel 下载twisted http://www.lfd.uci.edu/~gohlke/pythonlibs/#twis ...

  3. iOS全埋点解决方案-界面预览事件

    前言 ​ 我们先了解 UIViewController 生命周期相关的内容和 iOS 的"黑魔法" Method Swizzling.然后再了解页面浏览事件($AppViewScr ...

  4. simulink模块使用方式

    逻辑模块 1.小于等于系列模块 Applies the selected relational operator to the inputs and outputs the result. The t ...

  5. Vue2的右键弹出菜单（vue-contextmenu）

    给大家推荐一个基于Vue2的右键弹出菜单插件,支持单一SPA页面以及可以在循环绑定中使用. 项目地址为:https://github.com/chIIC/vue-...demo1: 父组件绑定右键事件 ...

  6. APICloud案例源码、模块源码、考试源码、开发工具大集合！赶快收藏

    APICloud专注于APP开发定制技术,多年来不停为开发者奉献更多的资源.此次,APICloud将以往的的资源进行更新.整合,以合集的形式分享给广大的用户. APICloud应用案例源码合集 API ...

  7. 让子弹飞，零成本让你的网站更快一点，boxopened http/3 (QUIC) 协议实战

    最近HTTP-over-QUIC 协议被正式命名为 HTTP/3,协议带来的最大改变是协议底层将采用UDP协议,而不再是TCP协议,这样的好处吗,就是更低时延,更好的拥塞控制,更精确的RTT时间,更高 ...

  8. Mybatis 实现批量插入和批量删除源码实例

    Mybatis 实现批量插入数据和批量删除数据 学习内容: 准备工作 1.数据库新建表 2.新建 Maven 项目和设置编译版本及添加依赖 3.新建 db.properties 4.新建 mybati ...

  9. DOS控制台

    :win+r--cmd--回车* A:d: 回车 盘符切换* B:dir(directory):列出当前目录下的文件以及文件夹* C:cd (change directory)改变指定目录(进入指定目 ...

  10. Vue脚手架结构及vue-router路由配置

    首先官网介绍,用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做 ...