<!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. TCP（三）

    1.三次握手 置位概念:根据TCP的包头字段,存在3个重要的标识ACK.SYN.FIN ACK:表示验证字段 SYN:位数置1,表示建立TCP连接 FIN:位数置1,表示断开TCP连接 三次握手过程说 ...

  2. 10分钟go crawler colly从入门到精通

    Introduction 本文对colly如何使用,整个代码架构设计,以及一些使用实例的收集. Colly是Go语言开发的Crawler Framework,并不是一个完整的产品,Colly提供了类似 ...

  3. （stm32学习总结）—GPIO位带操作

    本章参考资料:<STM32F10X-中文参考手册>存储器和总线构架章节.GPIO 章节,<CM3 权威指南 CnR2>存储器系统章节. 位带简介 位操作就是可以单独的对一个比特 ...

  4. ADAS最全整理

    为了实现「无人驾驶」的理想,各大整车厂和供应商目前正在开发「高级驾驶员辅助系统」(ADAS),随着 ADAS 慢慢被完善,车辆也在一步一步从 NHTSa 的 0 级过度到第 4 级,实现完全自动化.& ...

  5. JQuery基础修炼-样式篇

    jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能.我们可 ...

  6. C#编写一个控制台应用程序，输入三角形或者长方形边长，计算其周长和面积并输出

    编写一个控制台应用程序,输入三角形或者长方形边长,计算其周长和面积并输出. 代码: using System; using System.Collections.Generic; using Syst ...

  7. 【每日日报】第十八天 ----java最全排序方法

    1 今天看了Java的第三章 2 冒泡法排序: package Line; import java.util.Arrays; public class MaoPao { public static v ...

  8. JavaScript的使用以及JS常用函数（JS 遍历数组和集合）

    JavaScript入门 学习总结 1. 什么是 JavaScript 2. JavaScript 的特点 3. JS的使用 编写位置 基本语法 变量 打印变量 数据类型 innerHTML和inne ...

  9. 从零搭建react开发环境

    早在六年前,前端开发已经实现了模块化.工程化开发,既然是模块化工程化开发那就少不了包管理工具,所以我们的第一步就是先从安装nodejs开始(安装nodejs携带JavaScript的包管理工具npm) ...

  10. css让文字显示特定行数，多余的显示省略号

    /*css*/ .p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** ...