?

<template><div><inputtype="text"list="sg-nav-search"placeholder="請輸入需要搜索的關鍵詞…"v-model.trim="searchText"/><!-- 用來遮住原生向下箭頭 --><div class="sg-down-arrow" v-if="searchList.length"></div><datalist id="sg-nav-search"><option v-for="(item,$index) in searchList" :key="$index" :value="item"></option></datalist><button @click="gotoSearch">搜索</button></div>
</template>
<script>
export default {data() {return {searchText: "",//搜索框內容localStorageName: "sgNavSearchList",//保存到storage的鍵名searchList: [] //搜索記錄下拉框};},created() {this.searchList = this.getSearchList();},  methods: {gotoSearch() {      this.searchText? (this.routerTo("/search/" +this.searchIndex +"?word=" +encodeURIComponent(this.searchText)),this.saveSearchList(this.searchText)): this.$message.error("請輸入搜索關鍵詞！");},getSearchList() {// 獲取搜索過的關鍵字var storageSearchList = localStorage.getItem(this.localStorageName);return storageSearchList ? JSON.parse(storageSearchList) : [];},saveSearchList(searchText) {// 存儲搜索過的關鍵字var storageSearchList = localStorage.getItem(this.localStorageName);this.searchList = storageSearchList ? JSON.parse(storageSearchList) : [];this.searchList.includes(searchText) || this.searchList.push(searchText);localStorage.setItem(this.localStorageName,JSON.stringify(this.searchList));}}
};
</script>
<style lang='scss'>.sg-down-arrow {pointer-events: none;width: 43px;height: 43px;margin-left: -44px;margin-top: -9px;background: white;position: relative;&::after {content: "";z-index: 1;position: absolute;margin: auto;top: 6px;left: 31px;right: 0;bottom: 0;width: 0;height: 0;margin-left: -20px;border-width: 6px;border-style: solid;border-color: #ccc transparent transparent transparent;}}
</style>

總結

以上是生活随笔為你收集整理的Vue搜索框保存临时搜索的记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。