原生js包括历史搜索记录的搜索功能代码
时间: 2024-01-25 22:41:10 浏览: 35
以下是一个简单的原生JavaScript示例,用于实现历史搜索记录的搜索功能:
HTML:
```
<input type="text" id="searchBox">
<button id="searchBtn">搜索</button>
<ul id="searchHistory"></ul>
```
JavaScript:
```
// 获取搜索框、搜索按钮和搜索历史记录的元素
var searchBox = document.getElementById("searchBox");
var searchBtn = document.getElementById("searchBtn");
var searchHistory = document.getElementById("searchHistory");
// 监听搜索按钮的点击事件
searchBtn.addEventListener("click", function() {
// 获取搜索关键字
var keyword = searchBox.value.trim();
if (keyword) {
// 将关键字添加到搜索历史记录中
var li = document.createElement("li");
li.innerText = keyword;
searchHistory.appendChild(li);
// 清空搜索框中的内容
searchBox.value = "";
}
});
// 监听搜索历史记录的点击事件
searchHistory.addEventListener("click", function(event) {
// 如果点击的是搜索历史记录中的某个关键字,则将该关键字填充到搜索框中
if (event.target.tagName === "LI") {
searchBox.value = event.target.innerText;
}
});
```
此示例仅实现了基本的搜索历史记录功能,您可以根据需要进行更改和扩展。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)