layui 2.x 原生不支持 autocomplete，需手动实现：监听 input 事件、防抖请求、渲染浮层、绑定点击/键盘交互，并注意与表单校验、重置及移动端的兼容性。
layui 2.x 原生不支持 autocomplete，得自己补逻辑
layui 2.x 的 form.input 和 form.select 都没有内置输入联想（autocomplete）功能。你看到的“下拉提示”基本是靠 select 的搜索过滤或第三方插件模拟的。真要实现带异步请求、键盘导航、防抖的输入联想，必须手动集成逻辑。
核心思路是：监听 input 的 input 事件 → 触发防抖请求 → 渲染浮层列表 → 绑定点击/回车/上下键行为。
- 别直接改
layui.form.render()，它不接管 input 的事件流 - 浮层建议用
layui.layer或原生div+ 定位，避免和laydate/layim冲突 - 务必加
clearTimeout防抖，否则高频输入会触发大量无用请求
用 layui.jquery 监听输入并控制浮层显示
layui 自带 jQuery（版本通常为 1.8+），可以直接用 $ 操作 DOM。关键不是“怎么渲染”，而是“什么时候显示/隐藏浮层”和“怎么绑定交互”。
// 假设 input 的 class 是 'auto-input'
$('.auto-input').on('input', function() {
const val = this.value.trim();
if (!val) {
$('.autocomplete-list').remove();
return;
}
<p>clearTimeout(window.autocompleteTimer);
window.autocompleteTimer = setTimeout(() => {
$.get('/api/suggest?q=' + encodeURIComponent(val), function(data) {
if (data.length === 0) return;</p><pre class="brush:php;toolbar:false;"> // 清除旧浮层，插入新列表
$('.autocomplete-list').remove();
const $list = $(`<div class="autocomplete-list"></div>`)
.css({
position: 'absolute',
top: $(this).outerHeight() + 'px',
left: '0',
border: '1px solid #e6e6e6',
background: '#fff',
'z-index': 999,
'max-height': '200px',
overflow: 'auto'
})
.insertAfter(this);
data.forEach(item => {
$list.append($(`<div class="ac-item" data-value="${item.value}">${item.label}</div>`));
});
}.bind(this));}, 300); });
- 浮层
position: absolute必须相对于 input 父容器设position: relative，否则定位漂移 -
data-value存实际值，label显示给用户，避免 XSS，记得对item.label做 HTML 转义 - 不要在
input事件里直接发请求，必须防抖，300ms 是经验阈值
键盘操作（↑ ↓ 回车）和点击选中必须自己实现
layui 不处理浮层的键盘导航，layer.open 的 content 区域默认不响应 keydown。得给浮层绑定事件，并维护当前高亮索引。
$(document).on('click', '.ac-item', function() {
const value = $(this).data('value');
$('.auto-input').val(value).trigger('change');
$('.autocomplete-list').remove();
});
<p>$(document).on('keydown', '.auto-input', function(e) {
const $list = $('.autocomplete-list');
if (!$list.length) return;</p><p>const $items = $list.find('.ac-item');
let index = $list.data('highlight') || 0;</p><p>if (e.keyCode === 40) { // ↓
e.preventDefault();
index = Math.min(index + 1, $items.length - 1);
} else if (e.keyCode === 38) { // ↑
e.preventDefault();
index = Math.max(index - 1, 0);
} else if (e.keyCode === 13) { // 回车
e.preventDefault();
if ($items.eq(index).length) {
$items.eq(index).click();
}
return;
}</p><p>$items.removeClass('highlight');
$items.eq(index).addClass('highlight');
$list.data('highlight', index);
});
- 用
$(document).on而非$list.on，因为浮层是动态创建的 - 高亮状态用
highlightclass 控制，CSS 里加.ac-item.highlight { background: #eee; } - 回车选中后必须触发
change事件，否则 layui 表单校验不会感知值变化
和 layui 表单校验、重置、提交的兼容要点
layui 的 form.verify 只监听 blur 和表单提交，但 autocomplete 是“先填值再失焦”。如果用户点浮层选中，input 值变了但没触发 blur，校验可能滞后。
- 选中后调用
layui.form.val('form-filter', { field: value })同步到 form 数据，但注意：这不会触发验证，得手动form.validate() - 表单重置（
form.reset()）不会清空浮层，需额外监听reset事件并$('.autocomplete-list').remove() - 如果 input 有
lay-verify属性，建议在选中后立刻调用form.verify()或form.validate(true)强制校验 - 避免把 autocomplete 浮层插进
form标签内，否则提交时可能被当成字段提交（尤其用了name属性的 div）
最易忽略的是：浮层未销毁导致多次绑定事件、焦点离开 input 后浮层不自动隐藏、移动端 touchstart 未适配。这些不是“写完就跑通”，而是上线前必须逐个验证的边界情况。
