写一个vue历史搜索
时间: 2023-07-07 20:04:09 浏览: 59
以下是一个简单的 Vue 历史搜索组件的示例:
```html
<template>
<div class="search-bar">
<div class="search-box">
<input type="text" v-model="query" @keydown.enter="search" placeholder="Search...">
<button @click="search">Search</button>
</div>
<ul class="search-history" v-if="showHistory">
<li v-for="(item, index) in searchHistory" :key="index" @click="selectHistory(item)">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
query: '',
showHistory: false,
searchHistory: [],
}
},
methods: {
search() {
// Perform search action
console.log(`Searching for "${this.query}"`)
// Add query to search history
if (this.query !== '') {
this.searchHistory.unshift(this.query)
localStorage.setItem('searchHistory', JSON.stringify(this.searchHistory))
}
// Reset query and hide search history
this.query = ''
this.showHistory = false
},
selectHistory(item) {
// Update query with selected history item
this.query = item
this.search()
},
loadSearchHistory() {
// Load search history from local storage
const history = localStorage.getItem('searchHistory')
if (history !== null) {
this.searchHistory = JSON.parse(history)
}
},
},
mounted() {
// Load search history on component mount
this.loadSearchHistory()
},
}
</script>
<style>
.search-box {
display: flex;
justify-content: center;
align-items: center;
}
.search-box input {
width: 300px;
height: 30px;
margin-right: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
}
.search-box button {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
}
.search-history {
position: absolute;
top: 45px;
left: 0;
z-index: 1;
list-style: none;
padding: 0;
margin: 0;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
max-height: 200px;
overflow-y: auto;
}
.search-history li {
padding: 5px 10px;
cursor: pointer;
}
.search-history li:hover {
background-color: #ccc;
}
</style>
```
该组件有一个搜索框和一个搜索历史记录列表。当用户输入查询时,它将显示一个下拉列表,允许用户选择以前搜索的查询。
当用户输入并按下 Enter 键或单击搜索按钮时,组件将执行搜索操作并将查询添加到搜索历史记录中。搜索历史记录存储在本地存储中,并在组件加载时加载。
此外,当用户选择历史记录中的项时,组件将更新查询并执行搜索操作。
相关推荐
![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_column_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)