HTML5搜索框下拉历史记录实现

三、存储新搜索词并去重更新

当用户输入完成（如失去焦点或按下回车）时，将当前搜索词加入历史记录数组，并剔除重复项以保持列表简洁。localStorage仅支持字符串，因此需序列化后写入。

1、监听searchInput的blur事件和keydown事件（keyCode为13）：searchInput.addEventListener('blur', saveToHistory); 和 searchInput.addEventListener('keydown', e => { if (e.keyCode === 13) saveToHistory(); });

2、在saveToHistory函数中获取当前值：const value = searchInput.value.trim();

3、若value非空，读取现有历史数组，用filter去重并unshift插入新值：const updated = [value, ...history.filter(item => item !== value)].slice(0, 10);

4、将updated存入localStorage：localStorage.setItem('searchHistory', JSON.stringify(updated));

四、点击历史项自动填充搜索框

为提升交互效率，用户点击下拉列表中的某一项时，应立即将该项文本填入搜索框并收起下拉菜单。该步骤依赖事件委托，避免为每个历史项单独绑定事件。

1、为historyDropdown容器绑定click事件：document.getElementById('historyDropdown').addEventListener('click', e => { if (e.target.classList.contains('history-item')) { searchInput.value = e.target.textContent; searchInput.focus(); hideHistory(); } });

2、定义hideHistory函数，隐藏下拉容器：document.getElementById('historyDropdown').style.display = 'none';

3、在input事件处理函数中，当输入值为空时自动显示历史记录；否则仅显示匹配前缀的历史项（可选增强）

五、限制历史条数与清除机制

防止localStorage无限增长，需设定最大存储数量（如10条），并在新增时截断超长部分。同时提供手动清除入口，保障用户对隐私数据的控制权。

1、在saveToHistory函数中，调用slice(0, 10)确保数组长度不超过上限：const updated = [value, ...history.filter(item => item !== value)].slice(0, 10);

2、在HTML中添加清除按钮：清空历史

3、为按钮绑定点击事件，执行清除操作：document.getElementById('clearHistoryBtn').addEventListener('click', () => { localStorage.removeItem('searchHistory'); renderHistory(); });

以上就是《HTML5搜索框下拉历史记录实现》的详细内容，更多关于的资料请关注golang学习网公众号！