清空图标需置于input同级容器内并用绝对定位覆盖右侧，点击时执行$input.val('').trigger('change')同步form缓存，动态元素用事件委托，重载表格前须用form.val('filterForm')获取最新值，移动端需增大热区并用opacity控制显隐。
layui 表格搜索框怎么加清空图标（layui-icon-clear）
必须把 layui-icon-clear 放在 <input> 同级容器内（如 .layui-input-inline 或 .layui-input-block），不能塞进 input 里面。图标的定位靠绝对定位覆盖右侧，且需设 cursor: pointer 和足够 z-index，否则点不中或被遮挡。
点击叉号后值没清掉？检查是否触发了 change 事件
Layui 的 form.val('filterName') 不读 DOM 的 value 属性，而是依赖原生 change 事件同步缓存。只执行 $input.val('') 是无效的。
- 正确写法：
$input.val('').trigger('change') - 错误写法：
$input[0].value = ''、$input.val('')单独调用、或用form.val('filterName', {})覆盖整个表单（它不作用于未注册字段） - 如果搜索框是动态生成的，建议统一用
$(document).on('click', '.layui-icon-clear', handler)，避免事件绑定丢失
表格重载时搜索条件还是旧的？UI 和 where 必须同步更新
清空 UI 不等于清空查询参数。常见现象：点叉号 → 输入框变空 → 点搜索按钮 → 表格仍按旧关键词过滤。这是因为 table.reload({ where: { keyword: $('#keyword').val() } }) 里直接取了 DOM 值，但没走 form.val() 流程，导致和表单模块状态脱节。
- 推荐做法：先确保所有搜索项都注册到 form 模块（
name="keyword"等），再统一用form.val('filterForm')获取当前值 - 重载表格前，显式构造
where：table.reload({ where: form.val('filterForm') }) - 如果用了
laydate或select等组件，它们的值不会被$input.val('')影响，必须单独调用laydate.render().setValue('')或form.val('filterForm', { date: '', type: '' })再form.render()
移动端点不中叉号？热区和 pointer-events 很关键
iOS Safari 对小图标的点击响应敏感，单纯放大图标不够，容易误判为滑动。直接给图标设 display: none 控制显隐还会导致事件监听失效。
- 增大热区：用
<span class="clear-wrapper"><i class="layui-icon layui-icon-clear"></i></span>包一层，设宽高 32px、display: flex居中 - 显隐控制：用
opacity: 0; visibility: hidden;+transition，而不是display: none - 显示逻辑用 JS 判断：
input.value.trim() !== ''，不要监听input事件实时切显隐 —— 避免频繁 DOM 操作和抖动
change，结果界面看起来清了，但 form.val() 还拿着旧值，后续所有基于它的操作（提交、重载、校验）都会出错。
