Vue搜索框保存临时搜索的记录

<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搜索框保存临时搜索的记录相关推荐

有历史搜索记录的搜索框（百度搜索案例）
带有历史搜索词条的搜索框记录一下带有历史搜索词条的搜索框,具体效果类似百度搜索: 点击搜索框展示历史搜索词条列表: 点击搜索框以外的区域隐藏历史搜索词条列表: 点击删除除去对应词条. 效果图: ...
百度搜索结果的URL参数搜索框提示词搜索方式(rsv_sug2)
通过百度搜索框提示,看到可能想找的关键词之后,百度提供了2种方式供选择,并且用参数 rsv_sug2 记录了用户的选择. 百度搜索结果网址参数搜索框提示词搜索方式(rsv_sug2) 名称 rsv_ ...
百度搜索引擎结果网址参数搜索框提示词搜索方式(rsv_sug2)
通过百度搜索框提示,看到可能想找的关键词之后,百度提供了2种方式供选择,并且用参数 rsv_sug2 记录了用户的选择. [b]百度搜索结果网址参数搜索框提示词搜索方式(rsv_sug2)[/b] ...
百度搜索结果页面的参数搜索框提示词搜索方式(rsv_sug2)
通过百度搜索框提示,看到可能想找的关键词之后,百度提供了2种方式供选择,并且用参数 rsv_sug2 记录了用户的选择. 百度搜索结果网址参数搜索框提示词搜索方式(rsv_sug2) 名称 rsv_ ...
如何清除搜索框内的搜索历史记录？
如何清除搜索框内的搜索历史记录? 答:这是网页浏览器的一项功能.进入IE浏览器的相关菜单选项设置: ·如果您使用IE4.0浏览器,则由"查看→internet选项→内容→自动完成→清除表单→ ...
直播网站程序源码，搜索框实现快速搜索功能
直播网站程序源码,搜索框实现快速搜索功能 module.exports = async function (params, context) {const db = context.databasec ...
android特效集锦系列之八仿快播搜索框悬浮文字搜索
1. 仿快播搜索框悬浮文字搜索,我很无耻的把别人的成果直接拿了过来(大神饶了我吧,真是没有记作者名字的习惯), 效果: 一张图???为什么跟之前的文风不一样啊??别吐槽了,洗洗睡吧. 源码
搜索图标在搜索框内的搜索框的编写（宛如绕口令一般的标题）
以模仿微博顶部搜索框为例: <div style="height: 28px;width: 468px;"><input type="text" ...
fastadmin 快捷搜索修改默认字段多个字段 //菜单搜索框，默认搜索是id，想改成默认订单号
fastadmin thinkphp的框架下的集成基础框架快捷搜索修改默认字段多个字段 //菜单搜索框,默认搜索是id,想改成默认订单号 protected $searchFields = 'bu ...

Vue搜索框保存临时搜索的记录

Vue搜索框保存临时搜索的记录相关推荐

最新文章

热门文章