热门搜索需手动实现下拉层：用绝对定位ul渲染本地数组数据，挂载到document.body；输入为空获焦时显示，点击后赋值并派发input和change事件，合并where参数并重置分页；每次初始化前清除旧节点，避免重复绑定。
热门搜索怎么塞进搜索框下拉层
热门搜索不能靠浏览器 autocomplete 或 datalist 实现，必须手动拼 DOM + 绝对定位 ul 列表。Layui 没提供“热门词”开关，你得自己控制显隐、渲染和点击行为。
常见错误是把热门词硬写死在 datalist 里，结果 iOS 不显示、点击无响应，或者用 layui.autocomplete 这种不存在的组件导致样式错乱。
- 热门数据源建议用本地数组，比如
hotKeywords = ['订单查询', '用户管理', '导出报表']，避免每次点开都发请求 - 下拉容器必须挂到
document.body，否则被表格或弹窗的overflow: hidden截断 - 显隐控制别只靠
focus/blur：要监听input事件，当输入为空且获得焦点时才显示热门项；有输入内容时自动切为匹配建议 - ul 样式必须含
position: absolute; z-index: 9999; max-height: 180px; overflow-y: auto;，不然滚动失效或被盖住
点击热门词后怎么填值并触发搜索
光设 input.value = item 是不够的，Layui 的 form.on('submit') 和 table.reload() 都依赖事件流。手动赋值不会触发校验、也不会让 form.val() 同步更新。
容易踩的坑是点了热门词，input 显示了，但点搜索按钮却传空值——因为没派发事件。
- 必须手动触发两个事件：
inputEl.dispatchEvent(new Event('input', { bubbles: true }))和inputEl.dispatchEvent(new Event('change', { bubbles: true })) - 点击后立即调
table.reload()，where 参数要合并当前已有条件，不能直接覆盖：where: Object.assign({}, tableIns.config.where || {}, { keyword: item }) - 别忘了重置分页：
page: { curr: 1 }，否则热门词搜出来的结果可能卡在第 3 页
怎么避免多次渲染导致热门词重复绑定
表格 reload 或重新 render 时，如果热门下拉层没清理，会残留多个 ul.search-hotlist，点击任意一个都会触发多次搜索。这不是 bug，是你没做 DOM 清理。
最稳妥的做法是在初始化热门逻辑前，先移除旧节点：
- 每次执行热门逻辑前加一句：
document.querySelectorAll('.search-hotlist').forEach(el => el.remove()) - input 失焦时用
setTimeout(() => ul.remove(), 200)延迟销毁，防点击失效 - 给热门 ul 加唯一 class，比如
class="search-hotlist hotlist-xxx"，方便精准清理 - 如果用了
table.on('toolbar(xxx)')绑定事件，确保事件监听器也用相同 scope 变量管理，reload 前用layui.$(document).off('click', '.search-hotlist li')解绑
热门词要不要带图标或分类标识
可以加，但别用 Layui 内置图标类（如 layui-icon-search）直接塞进 li 里——表格工具栏 CSS 会干扰行高和垂直对齐，导致文字偏上或换行错位。
真正可控的方式是用内联 SVG 或 Unicode 字符，轻量且不依赖样式重载：
- 推荐用
?这类 emoji，兼容性好，不用额外加载字体 - 若需区分类型（如“热搜”“历史”），可用不同颜色文字：
<span style="color:#ff5722">[热]</span> 订单查询 - 不要在
li里放button或a标签，会导致 focus 状态混乱、移动端点击反馈异常 - 所有文本统一用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;防止长词撑破下拉层宽度
