<!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. MySQL 支持事务吗？

    在缺省模式下,MySQL 是 autocommit 模式的,所有的数据库更新操作都会即时 提交,所以在缺省情况下,MySQL 是不支持事务的. 但是如果你的 MySQL 表类型是使用 InnoDB T ...

  2. 告别尬聊，解锁秀场+社交新玩法（内含源码+Demo)

    直播已成为用户的生活习惯之一 艾媒咨询数据显示:2021年直播用户规模达到6.35亿人,在线直播用户以年轻群体为主,24岁及以下用户占比49%,30岁以下用户接近8成. 众所周知,Z世代用户是一个社交 ...

  3. 微信小程序：自定义组件的数据传递

    一.前言 如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来.下面介绍一个简单的组件和一个复杂的组件. 二.简单的组件(计数器) 1. 组件功能介绍 这个组件常见于外卖软件 ...

  4. css边距重叠的解决方案

    ** css防止边距重叠的方法 ** 今天整理了一下用css防止边距重叠的几种方法先假设一组dom结构 <div class="parent"> <div cla ...

  5. CCF201912-2 回收站选址

    解题思路:这道题唬人的在于坐标有正有负哈,刚开始不知道怎么下爪,仔细思考过后,我可是会面向对象编程的啊哈哈哈哈,我可是最喜欢封装了哈哈哈哈. 1.首先可以把每个点用一个结构体来定义,包含他的x,y坐标 ...

  6. Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (3)

    接上篇 Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (2) 7. 使用配置文件指定监听地址 打开 appsettings.json 文件,加入一行 "UseUrls&q ...

  7. [ Terminal ] 在 Windows Terminal 中使用 Git Bash

    https://www.cnblogs.com/yeungchie/ Git 自带的 git-bash 太简陋了,ConEmu 又太卡了,还是这个 Windows Terminal 最好用. 安装 W ...

  8. 攻防世界——stegano

    分析 1. 一个pdf,里边都是英文. 打开pdf "ctrl + F",检查flag 然活这里边直接告诉你,flag不在这里,一般都这么说了那就是真的不在了. 2. txt打开, ...

  9. Python入门-程序测试

    1.功能测试 常规测试 #常规测试代码,一个模块写功能,一个模块调用功能 #=============模块1:gongneng_ceshi def func(v1, v2): return v1* v ...

  10. c++对c的拓展_函数的引用

    注意:1.引用可作为形参较指针更为直观 2可作为返回值 (判断标准:空间是否释放) #include <iostream> #include <stdlib.h> using ...