Layui表单无内置模糊查询，需手动绑定input事件监听输入框，基于原始数据筛选后重写select的innerHTML并调用form.render('select')；表格模糊查询须用table.reload()重置分页，注意XSS防护与移动端失焦兜底。
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 页还显示旧数据，或总条数没变。
- 必须调用
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 } // 关键：重置当前页
});
});
移动端键盘弹起后失去焦点，input 事件可能失效
在 iOS Safari 或部分安卓 WebView 中，软键盘收起瞬间 input 框容易失焦，导致最后一次输入没被监听到。这不是 layui 的问题，但会影响模糊查询体验。
- 加个防抖 + 失焦兜底：给输入框同时监听
input和blur事件 - 避免用
setTimeout延迟执行搜索，而应立即执行 + 防抖（例如 lodash.debounce 或手写 300ms 延迟） - 测试时务必真机验证，模拟器常无法复现该问题
真正难的不是写几行代码，而是想清楚：模糊查询到底查的是哪部分数据？前端筛还是后端筛？查完要不要保持原有分页状态？这些决策点比语法更重要。
