layui搜索框加左侧图标需用layui-form-item容器包裹input并手动插入图标元素，图标加layui-input-prefix类（2.8+）或绝对定位css（旧版），确保input有layui-input和name属性，图标与input同级紧邻且z-index≥2，点击图标通过事件委托聚焦input。
layui搜索框怎么加左侧图标（非搜索类型）
不能靠 lay-type="search" 或 lay-search，那俩只管右侧搜索图标和清空按钮。左侧图标得手动结构组合，核心是用 layui-form-item 容器 + 绝对定位图标节点。
- 必须把
<input>包在<div class="layui-form-item"> 里，不能裸写 input <li>图标用 <code><i class="layui-icon layui-icon-user"></i>这类标准类名，插在 input 同级位置（前后都行），别塞进 input 里面 - Layui 2.8+ 可直接加
layui-input-prefix类到图标上；旧版本（如 2.7.x）需手动加 CSS：position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 2; - input 必须带
class="layui-input"，否则宽度/边框会错位；同时确保有name属性，否则表单模块可能漏绑定值 - 图标容器（
<i></i>）必须加z-index: 2，低于 2 就会被 input 边框压住 - 不要用
padding-left挤出空间再放伪元素：Layui 表单样式会重置box-sizing和padding，导致图标错位 - 移动端注意
left值：小屏下left: 12px可能贴左溢出，建议改用left: 10px+transform: translateX(0)更稳 - 如果用了自定义主题 CSS，检查是否覆盖了
.layui-form-item的position值——它必须是relative才能撑起绝对定位图标 - 推荐用事件委托：
layui.$(document).on('click', '.layui-icon-user', function() { $(this).next('input').focus(); }); - 确保图标和 input 是同级且紧邻（图标在前，input 在后），否则
.next()拿不到目标 - 避免重复绑定：如果页面多次初始化表单，先
off再on，或用唯一 class 标识该图标（如class="layui-icon-user js-focus-input"） - 别用
$(this).parent().find('input')：万一结构嵌套变化（比如加了 span 包裹），就断了 - 别把 input 套在
<label></label>里再加图标——Layui 的form.val()会跳过这种嵌套结构 - 别给 input 设
display: none或visibility: hidden：哪怕是为了“隐藏原生框”，也会让 form 模块认为该字段不可用 - 测试方法：在控制台执行
layui.form.val('yourFilterForm')，看返回对象里是否有对应name的键值 - 如果值为空，先查
console.log($('input[name="xxx"]').val())确认 DOM 值是否真的存在，再排查是否被其他 JS 清空过
为什么加了图标却偏移或被遮住
常见不是代码写错，而是层级和定位没对齐。Layui 的 input 默认是 position: relative，但它的边框和背景会盖住 position: absolute 的图标——尤其当没设 z-index 时。
点击左侧图标如何聚焦输入框
图标本身不响应 click，得手动绑事件。但别直接 $('i').on('click', ...)，表格重绘或动态加载后会失效。
form.val() 能否读取带左侧图标的 input 值
能，但前提是 input 有 name 属性，且没被 Layui 的校验规则意外跳过。图标本身不影响值读取，真正容易被忽略的是 DOM 结构破坏。
layui-form-item 是否真生效、没加 z-index、以及动态加载后忘了重新绑定 click。
