记得以前写过一个预定表格~~~~~比这个更难,一大串前端js~~~忘了~~~好记性不如烂笔头~~记录下,既帮助别人,也帮助自己~~~

实现思路~通过.on监听input标签的内容变化,通过this获取到val,通过.hide隐藏未匹配标签~~~大致这样

  • oninput是HTML5的标准事件
  • 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化,
  • 在内容修改后立即被触发,不像onchange事件需要失去焦点才触发
  • oninput事件在IE9以下版本不支持,需要使用IE特有的onpropertychange事件替代
  • 使用jQuery库的话直接使用on同时绑定这两个事件即可。
<input type="text" class="form-control" id="item_keyword"
name="item_keyword" placeholder="请输入关键字查找">

input代码

    <script src="/static/js/jquery-3.1.1.min.js"></script>
<script >
/* 实时搜索框,及点击按钮全选\取消*/
$('#item_keyword').on('input propertychange', function() {
console.log( $(this).val());
$('table tbody tr').hide()
.filter(":contains('" + ($(this).val()) + "')")
.show();
});
</script>

JS代码

jQuer实时监控input对table进行筛选的更多相关文章

  1. 移动端(html5)微信公众号下用keyup实时监控input值的变化无效

    搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有, 问题1:切换到中文输入法,问题出来了,keyup事件不灵便了,后来在网上搜了下,找到了思路, 问题2:微信公 ...

  2. 实时监控input输入值变化

    在web开发中,我们有时会需要动态监听输入框值的变化,当使用onkeydown.onkeypress.onkeyup作为监听事件时,会发现一些复制粘贴等操作用不了,同时,在处理组合快键键的时候也很麻烦 ...

  3. 改造断路器集群监控Hystrix Turbine实现自动注册消费者、实时监控多个服务

    在上一篇文章中,我们搭建了Hystrix Dashoard,对指定接口进行监控.但是只能对一个接口进行监听,功能比较局限: Turbine:汇总系统内多个服务的数据并显示到 Hystrix Dashb ...

  4. Spotlight实时监控Windows Server 2008

    Windows Server 2008作为服务器平台已逐渐被推广和应用,丰富的功能和良好的稳定性为其赢得了不错的口碑.但是和Windows Server 2003相比,其系统的自我监控功能并没有多大的 ...

  5. C#实现对文件目录的实时监控

    本文主要描述如何通过C#实现实时监控文件目录下的变化,包括文件和目录的添加,删除,修改和重命名等操作. 首先,我们需要对.net提供的FileSystemWatcher类有所了解.我有些懒,找了MSD ...

  6. java利用WatchService实时监控某个目录下的文件变化并按行解析(注:附源代码)

    首先说下需求:通过ftp上传约定格式的文件到服务器指定目录下,应用程序能实时监控该目录下文件变化,如果上传的文件格式符合要求,将将按照每一行读取解析再写入到数据库,解析完之后再将文件改名. 一. 一开 ...

  7. 【转】Spotlight实时监控Windows Server 2008

    Windows Server 2008作为服务器平台已逐渐被推广和应用,丰富的功能和良好的稳定性为其赢得了不错的口碑.但是和Windows Server 2003相比,其系统的自我监控功能并没有多大的 ...

  8. JQuery实时监控文本框字符变化

    $(function(){ $('input[name="addr"]').on('input propertychange', function() { if ($('input ...

  9. Jmeter实时监控+SpringBoot接口性能实战

    性能测试 Jmeter实时监控+SpringBoot接口性能实战 自动化 SpringBoot Java Jmeter实时监控+SpringBoot接口性能实战 一.实验目的及实验环境 1.1.实验目 ...

随机推荐

  1. 接口自动化框架pyface详细介绍

    版权说明 本框架系本人结合一些实践经验和开源框架设计思想,在家基于兴趣爱好独立完成的代码开发. 源码只保存在私人电脑,办公电脑上无.github开源与公司无关,先把关系撇清,不涉及侵权. 嘘. 框架定 ...

  2. 洛谷 P1047 校门外的树 题解

    Case 1. 本题其实不难,直接模拟就可以了.时间复杂度: \(O(L \times M)\) Case 2. 考虑一个简单的增强:把原来的: \[L \leq 10^4,M \leq 10^2 \ ...

  3. 报错:Error instantiating class com.liwen.mybatis.bean.Employee with invalid types () or values ().

    实体类默认构造方法是无参构造方法,一旦重写构造方法,默认方法就会变成重写之后的构造方法,所以该错误报的错就是实体类缺少无参构造方法

  4. vue命令式组件和插件编写

    一直在写各种业务,好多基本用法都忘记了,回顾一下: 一.vue各种UI库里的命令式组件比如element-ui里Notification组件,可以这样调用 this.$notify({ title: ...

  5. TensorFlow 卷积神经网络手写数字识别数据集介绍

    欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! 手写数字识别 接下来将会以 MNIST 数据集为例,使用卷积层和池 ...

  6. 下拉框select->option中如何把参数传到视图函数中去

    例子: <select name="p_id" id=""> {% for p in permissions %} <option value ...

  7. NCEP CFSR数据下载

    一.简介 CFSR(Climate Forecast SystemReanalysis)再分析资料使用了 GEOS-5(Goddard EarthObserving System)大气模式与资料同化系 ...

  8. P1345 [USACO5.4]奶牛的电信(点拆边 + 网络最小割)

    题目描述 农夫约翰的奶牛们喜欢通过电邮保持联系,于是她们建立了一个奶牛电脑网络,以便互相交流.这些机器用如下的方式发送电邮:如果存在一个由c台电脑组成的序列a1,a2,-,a©,且a1与a2相连,a2 ...

  9. Metrics:如何让线上应用更加透明?

    1. 上期我们结合<SRE Google 运维解密>,对监控系统进行了一次脉络梳理,知道一旦离开了监控系统,我们就没法辨别一个服务是不是在正常提供服务,就如同线上的服务在随风裸奔. 文章分 ...

  10. 【开源】使用Angular9和TypeScript开发RPG游戏(20200410版)

    源代码地址 通过对于斗罗大陆小说的游戏化过程,熟悉Angular的结构以及使用TypeScript的面向对象开发方法. Github项目源代码地址 RPG系统构造 ver0.03 2020/04/10 ...