Layui表格edit模式需手动为动态生成的input绑定autocomplete：监听cellEdit或MutationObserver捕获layui-table-edit节点，通过closest('tr')获取行数据动态加载候选值，并将下拉层挂载body+动态定位适配移动端。
layui table edit 模式下怎么加 autocomplete 提示
不能直接用 edit: 'text' 就完事——Layui 的表格内置编辑器不支持原生 autocomplete，得手动接管输入框并挂载第三方或原生 input 事件逻辑。
核心思路是：在单元格进入编辑状态后，拿到那个 input 元素，绑定 input 或 keydown 事件，结合数据源做匹配和弹层渲染。别指望 layedit 或 form.on('select') 能自动适配表格编辑框。
- 必须等
td触发edit事件后，再通过$(this).find('input')拿到真实 input 节点 - 不能在
init阶段就给所有 input 绑定事件（它们还没生成） - 建议用
autocomplete类库如awesomplete，轻量且不依赖 jQuery；若用原生list+datalist，注意 Safari 不支持动态更新datalist选项
如何监听 layui 表格的编辑触发时机
table.on('edit(test)') 是编辑完成后的回调，不是“开始编辑”时刻。要插手输入框初始化，得用 cellEdit 事件（Layui 2.8+）或更稳妥的 tool + event 模拟，但最可靠的是监听表格容器上的 click 并过滤 .layui-table-edit 类。
实操中，推荐在 done 回调里加一个防抖过的 DOM 观察：
table.render({
elem: '#test',
done: function() {
// 等表格渲染完，再监听后续编辑框出现
const observer = new MutationObserver(mutations => {
mutations.forEach(m => {
m.addedNodes.forEach(node => {
if (node.classList && node.classList.contains('layui-table-edit')) {
const input = node.querySelector('input');
if (input && !input.hasAttribute('data-autocomplete-bound')) {
initAutocomplete(input); // 你的补全初始化函数
input.setAttribute('data-autocomplete-bound', 'true');
}
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
}
});
autocomplete 数据源怎么和当前行/列对齐
补全项不能写死成全局数组——同一列不同行可能需要不同候选值（比如“城市”列在第 3 行只显示北京相关区，第 5 行显示上海相关区）。得从 tr 上提取行数据上下文。
- 通过
input.closest('tr')找到当前行，再用table.cache['test'][rowIndex]拿原始数据 - 或者在
cols配置里给该列加templet，提前把候选列表塞进data-options属性里，编辑时读取 - 避免在
initAutocomplete里直接调接口——高频输入会发一堆请求，应预加载或节流 + 缓存
移动端键盘弹起后 autocomplete 下拉被遮挡怎么办
这是 Layui 表格最常被忽略的坑：iOS 和部分安卓 WebView 中，position: absolute 的下拉菜单会被软键盘顶出视口，且 scrollIntoView 对它无效。
- 不要把下拉层 append 到
input父级，改用document.body，再用getBoundingClientRect()动态计算位置 - 监听
window.resize和focusin，在键盘弹起后强制重定位下拉层 - 如果用
awesomplete，需覆盖其container方法，并禁用fixed定位逻辑 - Layui 自带的
laydate或select下拉也有同样问题，别以为只有你遇到
补全不是加个 list 属性就能跑通的事，关键在时机、上下文和移动端适配。很多人卡在“为什么下拉不出现”，其实八成是 DOM 还没挂载好，或者 position 算错了。
