Layui input 接 autocomplete 下拉建议应优先使用 layui.autocomplete 第三方扩展，避免原生 autocomplete="on" 或 datalist；需引入 JS 文件后通过 render 方法初始化，支持数组或 Promise 数据源，并注意节流防抖、焦点控制、键盘导航及样式兼容性。
layui input 怎么接 autocomplete 下拉建议
layui 官方没提供原生的 autocomplete 组件，但可以用 layui.autocomplete（第三方扩展）或自己用 laytpl + input 事件模拟实现。直接上手最稳的方式是引入轻量级扩展，避免重写渲染逻辑。
注意：别试图给 input 加 autocomplete="on" 属性——Layui 的表单样式会覆盖原生下拉，且不响应输入事件绑定；也别用浏览器原生 datalist，它和 Layui 的 form.render() 冲突，选项点不了。
用 layui.autocomplete 扩展快速启用
这个扩展兼容 Layui 2.8+，体积小、不侵入核心，推荐直接使用。它本质是监听 input 的 input 事件，动态渲染一个绝对定位的 ul 列表。
- 下载
layui.autocomplete.js（GitHub 搜索该名即可找到主流维护版本）并引入到页面，在layui.use之前加载 - 确保目标
input已有id或class可定位，例如：<input type="text" id="city" placeholder="输入城市"> - 初始化时传入数据源，支持数组或 Promise：
layui.use(['autocomplete'], function(){
var autocomplete = layui.autocomplete;
autocomplete.render({
elem: '#city',
data: ['北京', '上海', '广州', '深圳'],
trigger: 'input', // 建议设为 'input'，比 'blur' 更及时
choose: function(item){ console.log('选中：', item); }
});
});
如果数据来自后端，把 data 换成函数返回 Promise 即可，内部自动节流防抖——这点很重要，否则快速敲字会发一堆请求。
手动实现时必须绕开的三个坑
自己写的话，核心是控制下拉层的显示/隐藏、键盘导航、点击选中。但以下问题高频出错：
-
input失去焦点时下拉层没销毁：必须监听blur并 setTimeout 延迟关闭，否则点击下拉项时触发 blur 导致一闪即逝 - 方向键无法上下移动：得监听
keydown，拦截ArrowUp/ArrowDown，并用scrollTop滚动可视区域，不能只改 class - 选中后没同步到 input 值：
choose回调里要手动赋值elem.value = item，再触发form.render()（如果该 input 在 layui 表单内）
另外，所有动态插入的 DOM 必须加 layui-show 类控制显隐，否则和 Layui 的 CSS 规则冲突导致样式错乱。
性能与兼容性要注意什么
数据量超过 500 条时，别一次性全塞进 data 数组——渲染卡顿明显。应该配合远程搜索，且服务端必须支持模糊前缀匹配（如 SQL 的 LIKE '关键词%'），而非全文检索。
- Layui 2.5.10 之前版本不支持
input的compositionstart/compositionend事件，中文输入法下会出现“输两个字才触发建议”的延迟，升级或手动 patch - 移动端 Safari 对
position: absolute下拉层定位不准，需加transform: translateZ(0)强制 GPU 渲染 - 若页面用了
iframe嵌套，下拉层可能被遮挡，需检查z-index和父级overflow设置
真正难的不是渲染列表，而是让键盘操作、鼠标点击、输入法、表单校验全部对齐——这些细节堆起来，自己实现的成本远高于引入一个稳定扩展。
