记得以前写过一个预定表格~~~~~ 比这个更难, 一大串前端 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 代码
来源: http://www.bubuko.com/infodetail-3062402.html