Layui原生不支持autocomplete属性生效，因其表单渲染劫持input元素并忽略原生属性；推荐使用layui.autocomplete扩展或手动实现下拉补全，需注意同步form数据与验证。
为什么 Layui 原生不支持 autocomplete 属性生效
layui 的表单渲染会劫持原生 <input> 元素，将其包裹进自定义的 dom 结构（如 .layui-input），同时移除或忽略部分原生属性。即使你写了 autocomplete="on"，layui 在 form.render() 时可能清空或覆盖该属性，导致浏览器自动填充功能失效。
这不是 bug，而是 Layui 为统一样式和交互做的 DOM 封装代价。解决思路不是“强行启用原生 autocomplete”，而是用可控方式模拟补全逻辑。
用 layui.autocomplete 第三方扩展（推荐轻量方案）
社区有维护良好的轻量扩展 layui.autocomplete，不依赖 jQuery，兼容 Layui 2.x，只需引入 JS 文件并初始化即可，比自己写下拉逻辑更稳。
- 下载地址：GitHub 搜索
layui-autocomplete（注意选 star 较高、更新至 2023 年后的版本） - 引入顺序必须在
layui.js之后、form.render()之前 - 初始化时需指定绑定的
input元素（推荐用id或name选择器） - 数据源支持数组、Promise 或函数返回，例如：
layui.autocomplete('#username', { data: ['admin', 'guest', 'testuser'], trigger: 'focus' // 可设为 'input' 实时触发 });
手动实现下拉补全 + 键盘导航（兼容性最强）
若不能引入第三方，可基于 Layui 的 dropdown 模块 + 原生事件控制。关键点在于：避免与 Layui 表单重绘冲突，且必须接管 ↑/↓/Enter 键行为。
- 不要用
form.on('select')—— 它只监听<select>，对 input 无效 - 监听
input事件获取当前值，用layui.dropdown.render()动态生成下拉菜单 - 下拉项用
<dl><dd>结构，配合layui-this类标识高亮项 - 必须阻止
keydown默认行为，否则 Enter 会触发表单提交 - 示例片段：
element.on('input(#search)', function(e) { const val = e.value.trim(); if (!val) return; // 调用接口或过滤本地数组，然后 render dropdown layui.dropdown.render({ elem: '#search', data: filteredList.map(item => ({title: item})), click: function(obj) { document.getElementById('search').value = obj.title; // 手动触发 change，确保 form.verify 生效 document.getElementById('search').dispatchEvent(new Event('change')); } }); });
与 Layui 表单验证共存的注意事项
手动补全后用户没点击下拉项、直接失焦，会导致输入值未被校验或校验结果滞后。常见问题包括：form.verify 不触发、form.val() 读不到最新值。
- 每次补全赋值后，必须显式调用
form.val('formFilter', {field: value})同步到 Layui 内部数据 - 如果用了
lay-verify属性，补全后需手动触发验证：form.verify({field: 'yourField'}) - 避免在
input事件里频繁调用form.render()—— 这会重绘整个表单，引发性能抖动和焦点丢失 - 移动端 Safari 对
autocomplete支持极差，手动下拉是唯一可靠路径
补全逻辑本身不复杂，但和 Layui 的 DOM 管理机制咬合处容易出错。最常被忽略的是：补全赋值后没同步到 form 实例，导致提交时取不到值。
