Layui表单input输入框如何实现输入内容时自动补全-Layui教程-PHP中文网

Layui input需借助第三方插件layui.autocomplete或手动结合dropdown实现autocomplete功能，原生不支持；推荐使用layui.autocomplete插件，配置elem、data/url、field等参数即可完成动态下拉提示。

layui input 如何接入 autocomplete 功能

layui 原生 input 不支持 autocomplete="on" 的智能补全（比如浏览器地址栏式下拉），它依赖的是浏览器自身对 name 属性的识别（如 name="email"、name="tel"），而非表单控件的 js 行为。想实现输入时动态匹配已有数据并下拉提示，必须自己实现搜索 + 下拉逻辑。

用 layui 的 `layui.autocomplete` 第三方扩展（推荐）

社区有稳定维护的 layui.autocomplete 插件，兼容 layui 2.x，封装了输入监听、防抖、远程/本地匹配、键盘导航等细节，比手写更可靠。

下载 autocomplete.js 并引入（放在 layui.all.js 后）
确保 input 在 form 容器中，且有 lay-search 属性或指定触发器
初始化时传入 data（数组）或 url（远程接口），注意字段名统一用 value 和 title
不建议直接操作 input 的 autocomplete 属性——Layui 会重置 DOM，该属性会被忽略

layui.use(['autocomplete'], function(){
  var autocomplete = layui.autocomplete;
  autocomplete.render({
    elem: '#myInput',
    data: ['JavaScript', 'Java', 'Python', 'Go'],
    field: 'value', // 匹配字段名
    trigger: 'focus' // 可选 'focus' 或 'input'
  });
});

手动实现：监听 `input` + `layui.dropdown` 组合

如果不想引入额外 JS，可用 Layui 自带的 dropdown 模块 + 原生事件监听拼一个轻量版，但要注意生命周期管理。

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

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

下载

给 input 绑定 input 事件，用 setTimeout 防抖（避免每敲一个字都查）
匹配结果生成 <dl><dd>xxx</dd></dl> 结构，作为 dropdown 的内容
调用 layui.dropdown.render() 时，triggerElem 必须是该 input 元素本身，且不能重复 render（否则内存泄漏）
click 选中后，需手动赋值到 input.value 并关闭下拉层：layui.dropdown.close(id)
注意移动端 focus 失去时自动收起下拉层，PC 端需监听 blur 主动 close

常见失效原因和绕过方案

很多同学写了代码但没反应，大概率卡在这几个点：

input 被 layui.form.render() 重绘后，原生事件监听丢失 → 改用事件委托或在 form.render() 后重新绑定
远程请求返回格式不是纯数组，而是 {code:0, data:[...]} → 初始化时用 response.dataName = 'data' 配置
下拉选项点击无响应 → 检查是否用了 layui.use 异步加载，dropdown 模块未正确引入
IE11 下 input 事件不触发 → 改用 propertychange 兼容（仅限 legacy 场景）
匹配区分大小写导致搜不到 → 在 filter 函数里统一转小写对比：item.value.toLowerCase().indexOf(val.toLowerCase()) > -1