Layui 官方无自动补全组件，需手动实现：监听 input 事件（兼容中文输入法）、防抖、abort 旧请求、绝对定位弹层渲染候选词、后端配合前缀匹配并返回扁平数组。
Layui 官方没有提供 layui.autocomplete 或类似自动补全组件，所有“搜索建议”类功能都得自己实现；强行套用第三方 autocomplete 插件极易和 Layui 表格、下拉框的 z-index、position 或事件委托冲突，不推荐。
为什么不能直接用 lay-search 或 form.on('select') 实现补全
lay-search 是为 select 组件设计的本地模糊匹配开关，只在渲染后的 dd 列表中做 includes()，不发请求、不支持异步、不返回候选词；form.on('select') 仅响应下拉选择动作，无法监听输入过程。两者都和“输入即提示”无关。
如何手动实现带防抖的异步补全弹层
核心是监听 input 事件 + 自定义 DOM 弹层 + 手动控制显示/隐藏逻辑，必须兼容中文输入法（compositionstart/compositionend）和防抖。
- 用
layui.$('#searchInput').on('input', ...)监听，但要在compositionstart时暂停计时，在compositionend后再触发 - 每次请求前调用
lastXhr?.abort()（Layui 2.8+ 支持），避免旧响应覆盖新结果 - 补全列表用绝对定位
div浮在输入框下方，加class="layui-anim layui-anim-upbit"做动画 - 弹层内容不能写死，需用
layui.each()渲染，每项绑定click事件并自动填入输入框、触发搜索 - 点击空白区域或失焦时，用
layui.$(document).on('click', ...)隐藏弹层，注意事件冒泡拦截
后端接口怎么配合才不踩坑
补全不是全文检索，而是前缀匹配（如输入“上”，返回“上海”“上饶”“上虞”），后端必须支持 keyword_start 类参数，且响应格式要统一：
- 返回数组，如
["上海市", "上饶市", "上虞区"]，不要嵌套在data.list里（除非你手动解包） - 字段名必须和前端
where一致，比如后端认q，你就不能传{ keyword: val } - 建议限制返回数量（如最多 5 条），避免弹层过长；前端也要加
if (res.length === 0) { $popup.hide(); return; } - 空格、全角字符、emoji 要在后端清洗，前端只负责透传，别自己 trim 或 replace —— 否则补全词和最终搜索词不一致
最易被忽略的 DOM 细节
弹层必须插入到输入框的父容器之后（不能 appendTo body），否则在 layui-layout 或 layui-card 内会因 overflow: hidden 被裁剪；同时要动态计算 left/top，不能写死 left: 0 —— 输入框若在右侧工具栏或固定定位区域，偏移量会错乱。用 $input.offset() 算位置，再减去父容器 scrollTop 才可靠。
