极简HTML搜索框带历史搜索词展示代码-html教程-PHP中文网

用 localStorage 存搜索历史词，每次存入前去重并截取最近5条，点击历史词自动填值并触发搜索，确保可访问性与边界逻辑对齐。

极简html搜索框带历史搜索词展示代码

搜索框怎么存历史词又不刷页面

直接用 localStorage 存，别碰 Cookie 或后端——轻量场景下它最稳，关浏览器也不丢。每次用户输完按回车或点搜索，就把 searchTerm 推进数组，再用 Set 去重、截取最近 5 条，最后 JSON.stringify 存进去。别用 sessionStorage，它关 tab 就清空，用户刚搜完想点历史词，结果没了。

常见错误：直接 push 不去重，历史列表越用越长；或者每次存整个数组但没做长度限制，存了几百条拖慢读取。

存前先读旧数据：JSON.parse(localStorage.getItem('searchHistory') || '[]')
去重用 [...new Set([...old, newTerm])]，比 filter 简洁
只留最新 5 条：history.slice(-5)，别用 splice(0, history.length - 5) 那种易错写法

历史词点击后怎么自动填进输入框并触发搜索

历史词是不是，避免默认跳转；绑定 click 后直接赋值 input.value，再手动调 form.submit() 或触发自定义搜索函数。别用 input.dispatchEvent(new Event('input')) 模拟输入——它不会触发你绑在 submit 上的逻辑，纯属多此一举。

容易踩坑：点了历史词，输入框填了但没搜，因为没主动调搜索动作；或者用了 location.search 拼接跳转，导致页面刷新丢失当前状态。

按钮加 type="button"，防误提交
填值后立刻 focus 输入框：input.focus()，方便用户删改
如果用事件委托，确保 delegate target 是按钮，不是外层 div

怎么让历史词不重复显示还保持顺序

顺序靠插入时机保证，不是靠渲染时排序——新搜的永远在末尾，取 slice(-5) 自然就是最新五条。去重必须在存的时候做，不能等到渲染时用 filter((v, i) => history.indexOf(v) === i)，那样会破坏顺序，且每次渲染都遍历浪费性能。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

示例片段：

const history = JSON.parse(localStorage.getItem('searchHistory') || '[]');<br>const updated = [...new Set([...history, term])].slice(-5);<br>localStorage.setItem('searchHistory', JSON.stringify(updated));