Layui 不支持 type="search"，因其 form.render() 无法识别该类型，导致验证失效、图标缺失及样式脱节；应改用 type="text" + layui-icon-search 手动组合，并确保聚焦、事件派发与表单联动完整。
为什么直接用 type="search" 会失效
layui 的 form.render() 不识别 type="search"，导致带 lay-verify 的验证逻辑跳过、联动字段不响应；firefox 下原生清除图标位置偏移、点击热区极小；更关键的是，layui 表单模块压根不会为该类型生成配套的搜索图标 dom 节点，你看到的只是浏览器默认行为，和 layui 样式体系完全脱节。
用 type="text" + layui-icon-search 手动组合最稳
核心是保留语义清晰的输入控件，再叠加可控制的图标节点。不是“美化”，而是结构级对齐。
- input 必须设
type="text"，加class="layui-input"，确保边框、圆角、高度与 Layui 统一 - 外层用
div class="layui-input"包裹（不是layui-input-inline），避免宽度塌陷 - 图标用
<i class="layui-icon layui-icon-search"></i>，紧贴 input 右侧，不要用伪元素或 background - 给图标绑定
click事件，聚焦 input 并触发搜索逻辑（如table.reload()或$.ajax()） - 必须调用
input.focus()，否则移动端点图标无法唤起软键盘
点击图标后如何正确触发搜索逻辑
不能只改 UI，要让行为链完整：聚焦 → 触发输入监听 → 执行搜索。否则防抖、验证、空值判断都会断掉。
- 图标 click 里先
input.focus()，再手动 dispatchinput事件：input.dispatchEvent(new Event('input')) - 如果用了防抖（比如
layui.util.throttle），确保该事件能进入防抖队列，而不是被忽略 - 若搜索依赖表单其他字段（如下拉状态筛选），需同步读取
layui.$('select[name="status"]').val()，别只取 input 值 - 避免重复绑定：图标 click 事件应在
form.render()后或 DOM 插入完成后绑定一次，不要在每次重绘时都on('click', ...)
兼容旧版 Layui（
layui-icon-search 图标本身无定位能力，老版本没 layui-input-suffix 类，靠 CSS 控制位置极易错位。
- 外层容器加
position: relative，图标加position: absolute; right: 12px; top: 50%; transform: translateY(-50%) - 务必设
z-index: 2，否则会被 input 的 border 盖住（尤其在 hover 状态） - 移动端注意
right: 12px在小屏可能溢出，建议用padding-right: 30px配合box-sizing: border-box更安全 - 图标尺寸默认是 16px，若 input 高度被自定义过（如
height: 42px），需同步调整top和transform值居中
