Input框内容改变触发事件，实现表格动态模糊查询

最新推荐文章于 2023-03-09 13:27:31 发布

放学杀猪

最新推荐文章于 2023-03-09 13:27:31 发布

阅读量859

点赞数

分类专栏：前端基础文章标签： jquery

本文链接：https://blog.csdn.net/zh137289/article/details/107432730

版权

前端基础专栏收录该内容

6 篇文章 1 订阅

订阅专栏

实现效果

通过给查询框添加绑定事件，实现BootStrap中输入值变化后自动查询并刷新数据，不需要点击查询按钮。

踩坑记录

$("#input").change(function(){
    //要实现的操作
});

这种方式下只有当input框失去焦点后才会触发，不能达到理想的效果。

最终实现

$("#input").bind("input propertychange",function(){
    //要实现的操作
});

完整测试代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>测试</title>
    <script type="text/javascript" src="Js/jquery-3.4.1.js"></script>
    <script>
        $(function () {
            /*$("[name=inputText]").change(function () {
                $("[name=respText]").val($(this).val());
            });*/
            $("[name=inputText]").bind("input propertychange",function () {
                $("[name=respText]").val($(this).val());
            });
        });
    </script>
</head>
<body>
<input type="text" name="inputText" placeholder="输入内容">
<input type="text" name="respText" placeholder="响应内容">
</body>
</html>