记得以前写过一个预定表格~~~~~比这个更难,一大串前端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. Hive知识点

    1.Hive是一种建立在Hadoop文件系统上的数据仓库架构,并对存储在HDFS中的数据进行分析和管理:(也就是说对存储在HDFS中的数据进行分析和管理,我们不想使用手工,我们建立一个工具把,那么这个 ...

  2. 谷歌2019 学术指标发榜:CVPR首次进入Top 10,何恺明论文引用最高!

    [导读]今天,谷歌发布了2019最新版学术指标,对收录的会议和期刊的影响力进行排名.AI类的多个顶会进入榜单Top 100,CVPR更是进入前10,而何恺明的"深度残差网络"单篇引 ...

  3. HDU - 3791 建立二叉搜索树

    题意: 给定一个序列,下面又有n个序列,判断这个序列和其他序列是否为同一个二叉树(同一序列数字各不相同) 思路: 首先讲将一个序列建立成二叉搜索树,然后将其他序列也建立二叉搜索树,两个树进行前序遍历, ...

  4. jsonp跨域的原理及实现

    1,什么是跨域? 跨域跨域,跨过域名,笼统来说就是一个域名区请求另外一个域名的数据,但实际上,不同端口.不同域名.不同协议上请求数据都会出现跨域问题.浏览器出于安全考虑会报出异常,拒绝访问. 2,js ...

  5. 【LeetCode】18.四数之和

    题目描述 18. 四数之和 给定一个包含 n 个整数的数组 nums 和一个目标值 target,判断 nums 中是否存在四个元素 a,b,c 和 d ,使得 a + b + c + d 的值与 t ...

  6. openssl与java(读取加密码的密钥)

    最近在研究java security方面的东西,java自带可以使用各种加密解密算法(rsa,dsa,des3,aes,md5...),但往往一些密钥是第三方给我们的,我们需要用java装载这些密钥然 ...

  7. 解决Pycharm导入当前项目的.py文件错误

    如图所示错误,由左边导航栏可见.py文件存在: 解决办法:右键单击导包错误文件所在目录,选择[Mark Directory as]+[Sources Root] 错误已解决:

  8. 阿里 IOS 面试官教你在面试中脱颖而出

    前言: 知己知彼.百战不殆,面试也是如此. 只有充分了解面试官的思路,才能更好地在面试中充分展现自己. 今天,阿里高级技术专家将分享自己作为面试官的心得与体会.如果你是面试者,可以借此为镜,对照发现自 ...

  9. 001_Three.js中的跨域问题

    001_Three.js中的跨域问题 [情景描述]: 在初始化模型,引入字体和纹理皮肤图片的时候,由于跨域问题,出现了以下提示: Access to image at 'file:///F:/User ...

  10. ajax2.0之文件上传加跨域

    express_server.js const express=require('express'); //主体 const body=require('body-parser'); //接收普通PO ...