layui表单怎么实现输入联想提示列表（autocomplete）-Layui教程-PHP中文网

layui 2.x 原生不支持 autocomplete，需手动实现：监听 input 事件、防抖请求、渲染浮层、绑定点击/键盘交互，并注意与表单校验、重置及移动端的兼容性。

layui表单怎么实现输入联想提示列表（autocomplete）

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。得给浮层绑定事件，并维护当前高亮索引。

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

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

下载

$(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);
});
</p>

用 $(document).on 而非 $list.on，因为浮层是动态创建的
高亮状态用 highlight class 控制，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）