Layui不支持type="search"，因其默认不接管其清除按钮，导致Firefox下图标偏移、热区小、样式脱节，且form.render()无法识别，使lay-verify失效、form.val()取不到新值、联动中断；必须用type="text"配合自定义layui-icon-clear图标，同级插入并绝对定位，监听input事件控制显隐，点击时清空值并触发change或input事件以同步表单状态。
为什么直接用 type="search" 不行
layui 默认不接管 type="search 的清除按钮，firefox 下图标偏移、点击热区小，样式和整体 ui 脱节；更关键的是 form.render() 完全不识别它，导致 lay-verify 验证失效、form.val() 拿不到新值、联动逻辑中断。
必须用 type="text" + 自定义 layui-icon-clear
核心是保持 input 类型为 text，手动插入图标并控制显隐与行为：
- 图标必须和
<input>同级（不能塞进 input 里），推荐放在<div class="layui-input"> 内部紧邻 input 右侧 <li>图标加 <code>style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 2;"实现覆盖定位 - 监听
input事件：值非空时clearBtn.style.display = 'inline-block'，为空时设'none' - 点击图标时执行：
input.value = ''+input.focus()+input.dispatchEvent(new Event('input'))（原生方式）或$(input).val('').trigger('change')（jQuery 方式） - 务必加
e.stopPropagation()，避免点击图标触发父容器的 click 或表单 submit - 只改
input.value或$(input).val('')不够，必须触发change或input事件（Layui 表单值同步完全依赖这个事件） - 如果 input 已注册
lay-verify，清除后验证状态不会自动重置，需手动调form.validate('filterName')或等下次提交时校验 - 动态生成的搜索框（如表格工具栏内），建议用事件委托：
$(document).on('click', '.layui-icon-clear', handler)，避免绑定丢失 - 先统一用
form.val('searchForm', {})清所有已注册字段，再调form.render()（对 select/date/checkbox 等组件，需额外form.render('select')或laydateIns.setValue('')） - 表格重载必须显式传
where: {}（空对象，不是null或undefined），否则继承上次缓存 - 重置按钮务必写成
<button type="button"></button>，防止在<form></form>内被浏览器默认当 submit 处理
清空后 form.val() 还是旧值？检查这三点
这是最常踩的坑——UI 清了，但表单模块缓存没更新，提交时仍发旧数据：
带 Layui 组件（select/date）的搜索区域如何一键清空
单纯清 input 不等于清整个搜索条件，尤其是表格重载时 where 参数容易残留：
真正难的不是加那个 × 图标，而是让它的点击行为完整走通 Layui 的事件链、缓存机制和组件生命周期——漏掉 trigger('change') 或 form.render()，就等于只动了皮毛。
