layui input需手动实现搜索历史下拉：监听input事件、localStorage存取（键名searchHistory_+name）、防抖过滤、unshift去重倒序、body内绝对定位渲染ul、失焦销毁、选中后派发input/change事件触发校验。
layui input 怎么加搜索历史下拉菜单
原生 layui 的 input 不自带历史记录自动补全，得靠组合方案：用 layui.autocomplete（非官方组件）或自己监听 input + 本地存储 + 手动渲染下拉列表。最稳妥的做法是绕过 layui.form 的渲染逻辑，直接操作 dom 并绑定事件。
- 不要依赖
layui.form.render()来“激活”自动补全，它不处理这个 - 历史记录建议存在
localStorage，键名统一用searchHistory_你的inputName格式，避免冲突 - 输入框必须有
name属性，否则无法区分不同搜索框的历史 - 下拉容器要手动插入到
body，并用position: absolute定位，否则会被layui的表单样式遮挡
如何监听输入并显示本地历史匹配项
核心是监听 input 的 input 事件（不是 change），实时过滤 localStorage 中的记录。注意防抖，否则频繁触发影响体验。
- 用
setTimeout+clearTimeout实现简单防抖，延迟 200ms 再查历史 - 匹配逻辑建议用
item.includes(val)（大小写不敏感可用item.toLowerCase().includes(val.toLowerCase())） - 最多显示 5 条，避免列表过长；空输入时清空下拉，但保留历史数据
- 点击历史项后，要调用
inputEl.value = item并触发inputEl.dispatchEvent(new Event('input'))，确保后续逻辑能感知值变化
怎么让历史记录去重并按时间倒序排列
每次新增搜索词，先从 localStorage 取出数组，删除重复项，再把新词 unshift 到开头，最后截取前 10 条存回。这样既保最近、又控数量。
- 存入前做
String.trim()，避免空格导致重复 - 过滤掉空字符串和纯空白符：
if (!item || !item.trim()) continue - 使用
JSON.parse(JSON.stringify(arr))或[...new Set(arr)]去重，后者更简洁但不保证顺序，所以推荐先filter再reduce手动去重 - 别用
Date.now()存时间戳——历史记录不需要精确时间，只需顺序，unshift天然满足
下拉列表和 layui 表单样式冲突怎么办
layui 默认表单区域有 overflow: hidden 和固定高度，会把下拉菜单裁掉。必须脱离父容器流式布局。
- 下拉
<ul></ul>元素不能放在layui-form-item内部，要document.body.appendChild(ul) - 定位用 JS 动态计算：
let rect = inputEl.getBoundingClientRect(); ul.style.left = rect.left + 'px'; ul.style.top = (rect.bottom + window.scrollY) + 'px'; - 加
z-index: 9999，不然压不过layui-layer或弹窗 - 失焦时销毁下拉列表（
blur事件 +setTimeout延迟 150ms，防止点击下拉项被误判为失焦）
layui.form.on('submit') 里不会自动校验，得手动调用 form.validate() 或在选中后触发一次 inputEl.dispatchEvent(new Event('change'))。
