layui 表格搜索框动态加载数据

最新推荐文章于 2026-04-17 11:23:10 发布

原创最新推荐文章于 2026-04-17 11:23:10 发布 · 3w 阅读

20 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#layui

layui 专栏收录该内容

1 篇文章

订阅专栏

这篇博客详细介绍了如何在layui表格中使用输入框进行动态搜索，通过监听输入事件，实现实时加载和更新数据的功能。

inpunt 框如下

<li>
  <div class="layui-input-block" style="float: left; position: relative;">
      <label class="layui-form-label">订单搜索</label>
    <input style="width: auto;" type="text" id="select_orderId" name="select_orderId" lay-verify="required" placeholder="请输入订单编号" autocomplete="off" class="layui-input">
  </div>
    <button class="layui-btn" lay-submit="" id="searchBtn" data-type="getInfo" style="float: left;">搜索</button>
</li>

事件如下

//订单搜索

    $('#searchBtn').on('click',function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    // 点击获取数据
    var  active = {
        getInfo: function () {
            var orderId=$('#select_orderId').val();
            if (orderId) {
                var index = layer.msg('查询中，请稍候...',{icon: 16,time:false,shade:0});
                setTimeout(function(){
                    table.reload('LAY-app-message-all', { //表格的id
                        url:'/Order/selectByOrderId',
                        where: {
                            'orderId':$.trim(orderId)
                        }
                    });
                    layer.close(index);
                },800);
            } else {
                layer.msg("请输入编号");
            }
        },
    };
  //监听回车事件,扫描枪一扫描或者按下回车键就直接执行查询
    $("#select_orderId").bind("keyup", function (e) {
        if (e.keyCode == 13) {
            var type = "getInfo";
            active[type] ? active[type].call(this) : '';
        }
    });