可以的，可以通过保存历史搜索
记录的方式，在用户点击历史搜索
记录时，将历史搜索
记录中的文本填入搜索框中，然后再通过代码触发搜索操作。下面是一个简单的示例代码：
```html
<!-- 搜索表单 -->
<form id="search-form">
<
input type="text" id="search-
input" placeholder="搜索...">
<button type="submit">搜索</button>
</form>
<!-- 历史搜索
记录列表 -->
<ul id="search-history">
<li>搜索
记录1</li>
<li>搜索
记录2</li>
<li>搜索
记录3</li>
</ul>
<script>
// 获取搜索表单和历史搜索
记录列表
const searchForm = document.getElementById('search-form');
const search
Input = document.getElementById('search-
input');
const searchHistory = document.getElementById('search-history');
// 从本地存储中获取历史搜索
记录
const history = JSON.parse(localStorage.getItem('search_history')) || [];
// 显示历史搜索
记录
history.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
searchHistory.appendChild(li);
});
// 点击历史搜索
记录时，填入搜索框并搜索
searchHistory.addEventListener('click', event => {
const target = event.target;
if (target.nodeName === 'LI') {
search
Input.value = target.textContent;
searchForm.submit(); // 触发搜索操作
}
});
// 提交搜索表单时，保存搜索
记录到本地存储
searchForm.addEventListener('submit', event => {
event.preventDefault();
const keyword = search
Input.value.trim();
if (keyword) {
// 将搜索关键字添加到历史搜索
记录中
history.unshift(keyword);
// 最多保存10条历史搜索
记录
history.splice(10);
// 将历史搜索
记录保存到本地存储中
localStorage.setItem('search_history', JSON.stringify(history));
// 触发搜索操作
// ...
}
});
</script>
```
这段代码实现了一个简单的搜索功能，包括保存历史搜索
记录和点击历史搜索
记录进行搜索的功能。你可以根据自己的需求进行修改和扩展。
文章介绍了如何使用CSS伪类（::-webkit-input-placeholder,::-moz-placeholder等）改变输入框placeholder的颜色，并在输入框聚焦时去除边框，同时处理不同浏览器的兼容性问题。着重讲解了:focus状态下的边框处理和outline的使用。
扫一扫
545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
