layui表单怎么实现模糊查询功能-Layui教程-PHP中文网

layui表单无内置模糊查询，需手动绑定input事件监听输入框，基于原始数据筛选后重写select的innerhtml并调用form.render('select')；表格模糊查询须用table.reload()重置分页，注意xss防护与移动端失焦兜底。

layui表单怎么实现模糊查询功能

layui 表单里没有内置模糊查询，得自己加 `input` 事件监听

layui 的表单组件（比如 form.select、form.checkbox）本身不带搜索或过滤能力。所谓“模糊查询”，实际是用户在输入框里打字，你实时匹配数据并更新下拉选项或列表。核心不是改表单渲染逻辑，而是接管输入行为 + 自行筛选数据。

常见误区是试图用 form.render() 或 form.on('select') 去触发搜索——这些只响应选择动作，不响应输入过程。

必须绑定原生 input 或 keyup 事件到输入框 DOM 元素上
建议用 input 事件（支持中文输入法上屏后触发），避免 keyup 在 IME 输入时误判
若用 lay-search 属性开启 select 搜索，它只提供前端关键词高亮，不自动过滤选项；真正过滤仍需手动操作 select 的 options 集合

select 下拉框实现模糊筛选：先清空再重写 `options`

layui 的 select 渲染后，DOM 结构里 option 是真实存在的，但 layui 不暴露 API 直接增删选项。安全做法是：保留原始数据源，每次搜索时重新生成 select 的 innerHTML，再调用 form.render('select')。

// 假设原始数据存在全局变量 optionsData
const optionsData = [
  {value: '1', name: '北京朝阳区'},
  {value: '2', name: '北京海淀区'},
  {value: '3', name: '上海浦东新区'},
  {value: '4', name: '广州天河区'}
];

// 绑定搜索输入框
layui.jquery('#searchInput').on('input', function() {
  const keyword = this.value.trim();
  const $select = layui.jquery('#mySelect');
  
  if (!keyword) {
    $select.html('<option value="">请选择</option>' + 
      optionsData.map(d => `<option value="${d.value}">${d.name}</option>`).join(''));
  } else {
    const filtered = optionsData.filter(d => 
      d.name.includes(keyword) || d.value.includes(keyword)
    );
    $select.html('<option value="">请选择</option>' + 
      filtered.map(d => `<option value="${d.value}">${d.name}</option>`).join(''));
  }
  
  layui.form.render('select'); // 必须重新渲染，否则 UI 不更新
});

不要直接操作 $select.find('option') 删除/显示，layui 渲染后会丢失状态（如已选中项）
form.render('select') 必须调用，否则下拉菜单样式和交互失效
注意 XSS：如果 name 来自不可信来源，需对 d.name 做 HTML 转义（例如用 layui.util.escape()）

配合 layui.table 实现表格内模糊查询，别漏掉 `page` 重置

如果模糊查询目标是表格（table.render），常见错误是只前端 filter 数据却没重置分页——导致第 2 页还显示旧数据，或总条数没变。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

必须调用 table.reload()，传入新数据 + page: {curr: 1} 强制回到第一页
不要在 data 字段里直接 push/filter 原始数据，应始终基于原始全量数据做筛选
若原始数据量大（>1000 条），建议用 where 参数交由后端处理，前端只做轻量级关键词包含匹配

示例片段：

let fullTableData = []; // 初始化时存好全部数据

// 搜索触发
layui.jquery('#tableSearch').on('input', function() {
  const keyword = this.value.trim();
  let filtered = fullTableData;
  
  if (keyword) {
    filtered = fullTableData.filter(row => 
      Object.values(row).some(val => 
        String(val).includes(keyword)
      )
    );
  }
  
  layui.table.reload('myTable', {
    data: filtered,
    page: { curr: 1 } // 关键：重置当前页
  });
});