Layui如何实现表单input输入框的自动补全（Autocomplete）-Layui教程-PHP中文网

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 键行为。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

不要用 form.on('select') —— 它只监听 <select></select>，对 input 无效
监听 input 事件获取当前值，用 layui.dropdown.render() 动态生成下拉菜单
下拉项用 <dl><dd></dd></dl> 结构，配合 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'));
    }
  });
});