layui表格搜索框加历史记录需绕过layui.form渲染，用原生input监听input事件+localstorage存取+动态创建ul挂载body；存取时带作用域前缀、去空、unshift入栈、slice截取10条；下拉定位用getboundingclientrect并加scrolly偏移；匹配大小写不敏感；点击后派发input和change事件并合并where条件reload；初始化前清理旧节点防重复绑定。
直接上结论：layui 表格搜索框加历史记录，必须绕过 layui.form 渲染逻辑，用原生 <input> 手动监听 input 事件 + localstorage 存取 + 动态插入 <ul></ul> 下拉层，且下拉容器必须挂到 document.body，否则会被 layui 表单的 overflow: hidden 裁掉。
怎么存和读搜索历史
历史记录不能靠后端返回或写死数组，得本地持久化：
-
localStorage键名必须带作用域前缀，比如searchHistory_tableKeyword，避免多个搜索框互相覆盖 - 每次输入后触发保存：先
JSON.parse(localStorage.getItem(key)) || []，再filter(item => item && item.trim())去空，unshift(val.trim())插到开头，最后slice(0, 10)截取最新 10 条 - 读取时直接用
JSON.parse()，别漏了try...catch——用户手动清过 localStorage 时会返回null - 不要用
Date.now()记时间戳，历史记录只看“最近”，unshift天然满足顺序要求
如何渲染和定位下拉建议列表
下拉菜单不是插在 input 旁边，而是 JS 动态创建并 append 到 document.body：
- 用
getBoundingClientRect()获取 input 位置，计算left和top（注意加上window.scrollY） -
z-index: 9999必须设，不然会被layui-layer、弹窗或表格滚动条压住 - 样式里加
position: absolute; max-height: 200px; overflow-y: auto;，不然长列表滚不动 - 匹配逻辑用
item.toLowerCase().includes(val.toLowerCase())，大小写不敏感更友好
点击历史项后怎么同步值并触发后续逻辑
光赋值 input.value = item 不够，Layui 表单校验、form.on('submit') 都依赖事件流：
- 必须手动派发
inputEl.dispatchEvent(new Event('input', { bubbles: true })) - 再补一个
inputEl.dispatchEvent(new Event('change', { bubbles: true }))，确保 form.verify 等校验能触发 - 选中后立即调用
table.reload()，但 where 参数要合并原有条件，不能直接覆盖——比如已有状态筛选，就得where: Object.assign({}, currentWhere, { keyword: item }) - 失焦时用
setTimeout(() => ul.remove(), 200)延迟销毁，防止点击建议项瞬间就隐藏
最易被忽略的是：多次 table.render() 或 reload() 后，如果没清理旧的事件监听和 DOM 节点，会出现重复绑定、下拉层堆叠、点击失效等问题。每次初始化建议逻辑前，先 document.querySelectorAll('.search-history-list').forEach(el => el.remove()) 是稳妥做法。
