vue实现历史搜索

最新推荐文章于 2023-07-06 09:25:49 发布
最新推荐文章于 2023-07-06 09:25:49 发布
阅读量1.1k 收藏 6
点赞数
分类专栏： 历史搜索 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45045593/article/details/107053292
版权
本文介绍了如何使用Vue来实现历史搜索功能。主要包括：初始化时从缓存获取数据，监听输入框值变化，判断并处理历史搜索项的增删，以及确保历史记录数组长度不超过5条。
摘要由CSDN通过智能技术生成

思路:
1. 一进入到页面,就获取缓存当中的数据;
2. 当点击input搜索框时,拿到input双向数据绑定的值;
3. 判断缓存中有没有值,没有就存当前的值;
4. 如果缓存当中有值,判断是不是重复值,是就删除当前值,并重新缓存到数组头部,不是就缓存到数组头部;
5. 判断数组长度若是大于5,就删除数组尾部的值.
在这里插入图片描述

<uni-nav-bar fixed="true" style="display: flex;justify-content: center; margin-top: 15px;" :status-bar="true" :border="false" class="NavBar"
		 :rightText="searchtext" left-icon="back" @clickLeft="goBack()">
			<view class="top_flex">
				<view class="user_top_seach">
					<u-icon size="50" name="search" color="#999" @click="searchAll" @keyup.enter="searchAll"></u-icon>
					<input class
最低0.47元/天 解锁文章
~那一刻~
关注
专栏目录
Vue项目功能开发：搜索历史管理 && 实现持久化存储记录 && 完整的实际开发运用
Forever_Hopeful的博客
09-25 415
Vue项目功能开发：搜索历史管理 && 实现持久化存储记录 && 完整的实际开发运用
Vue 实现输入框新增搜索历史记录功能
10-16
主要介绍了Vue 输入框新增搜索历史记录功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue 搜索框添加历史搜索记录
qq_44888570的博客
05-05 4483
笔者vue项目有一个需求，搜索框添加历史搜索记录。想着很久没更新博客了，记录一下吧。 PS：pinia+vue3+vant+ts，或许你在使用vue2的语法，不要紧，可以根据自己的需求简单改改。 效果图 正文 搜索框的逻辑就不介绍了，今天这个问题其实是vue操作localStorage。笔者先写了一个工具类来完成对缓存的操作： export class CacheManager { static getHomeSearchHistoryWords() { return localStorage
前端Vue自定义带历史记录的搜索框组件searchBar 支持搜索输入框清空 搜索历史存储记录清除
最新发布
chenchuang0128的博客
07-06 2485
搜索
vue实现搜索框记录搜索历史_用Vue.js实现一个简单的搜索框
weixin_39774682的博客
12-20 410
主要用到的知识很简单，简单的vuejs2.0的知识就够了。源码用了.vue构建和ES6，用了webpack打包等等。我资历还浅，先用一个简单的.js的写。先看效果这里有两个组件，一个组件是logo部分的，一个是搜索框部分的。html很简单，就是引用两个组件。先来分析，首先一个显示搜索引擎的图片，这里要响应式的，下面选择了不同的搜索引擎图标就要跟着换。所以。后面的倒三角点击时显示下拉列表 。然后是...
vue项目搜索历史功能的实现
qsj0606的博客
04-17 1021
vue项目搜索历史功能的实现 播放器项目中歌曲搜素页面的 首先需要在state定义搜索历史，在其中保存搜索历史 state.js:<br>// 搜索历史： searchHistory: [] mutations中新增改变搜索历史的方法 mutations.js:<br>SET_SEARCH_HISTORY(state, history) { state.searchHistory = history }　 在actions中需要提交一个状态改变history，由于需要存储
vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）
10-15
本篇介绍的是一段Vue搜索页开发的实例代码，涵盖了热门搜索、历史搜索以及如何调用淘宝接口进行搜索演示。在Web开发中，搜索页是非常关键的一个组成部分，它直接影响到用户体验和网站的功能完整性。Vue.js作为一个...
基于Vue.js 2.0实现百度搜索框效果
10-19
百度搜索框效果的实现是前端开发中常见的一个功能练习项目，通过实现该功能，开发者可以锻炼对Vue.js的综合运用能力。 实现百度搜索框效果的关键在于以下几个方面： 1. 界面布局：使用HTML和CSS构建搜索框的基本...
vue基础：模块化以及封装Storage组件，实现保存搜索的历史记录
谷咕咕
01-20 681
vue基础：模块化以及封装localStorage组件，实现保存搜索的历史记录 1.localStorage（长期存储）与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在 注意：localStorage（长期存储）与 sessionStorage 用法基本一致，应用类型的值要转换成json， 1.保存 //对象 const info = { name: 'hou', ag...
搜索显示历史记录
10-30
实现EditTex输入过程中显示历史记录，方便快捷
vue实现搜索框记录搜索历史_基于Vue.js实现简单搜索框
weixin_39715513的博客
12-20 466
基于Vue.js实现简单搜索框发布时间：2018-12-30 发布网站：编程之家编程之家收集整理的这篇文章主要介绍了基于Vue.js实现简单搜索框，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。在github上看到的练习，看个遍代码后自己再练一遍，先放原址：主要用到的知识很简单，简单的vuejs2.0的知识就够了。源码用了.vue构建和ES6，用了webpack打包等等。我资历还浅，...
vue 实现搜索历史_vue历史搜索模块
weixin_35680955的博客
01-13 221
搜索历史{{val}}saveHistory(item){//保存搜索记录var storage = window.localStorage;var itemWord = item;if(storage.getItem('this.searchWord') == null){//若无记录历史,直接将新的历史记录设置在localStorage中this.historyList.unshift(ite...
Vue音乐--搜索页面09_搜索历史记录本地缓存
kingAn123的博客
10-11 770
大概步骤： 目标效果 九、搜索历史数据新建 要点： 新建vuex的state数组变量，点击时存入和调用时读取数据即可 利用本地缓存插件，取和操作再存 如果不可考虑本地缓存的话，就是获取到state中数组，并把点击的值push进行数组，然后存下这个数组替换掉state中的即可 而要存入本地缓存的话，即push进本地缓存，state则从本地缓存中获取。 操作稍微复杂因此，单独做成js用...
Vue简史
weixin_33759269的博客
03-04 7116
题记“谁掌握了过去，谁就掌握了未来”——乔治.奥威尔前言发端于2013年的个人项目，已然成为全世界三大前端框架之一，在中国大陆更是前端首选。它的设计思想、编码技巧也被众多的框架借鉴、模仿。学习研究Vue的演进，对于前端同学来说，是提高自身认识和水平的法门。 纪略Ø 2013年，在Google工作的尤雨溪，受到Angular的启发，从中提取自己所喜欢的部分，开发出了一款轻量框架，最初命名为Seed...
vue 搜索框带历史记录
weixin_43337481的博客
06-09 535
【代码】vue 搜索框带历史记录。
Vue 搜索历史功能的实现(增添，删除，隐藏，清空)
_Kiwi_berry的博客
02-22 1980
Vue刚入门，模仿了B站首页（部分）UI巩固所学知识，下面展示其中搜索历史功能的实现，项目完整代码和页面效果见文末链接 HTML： <div class="search_record_box" id="search_record_box_id"> <!-- 搜索框 --> <div class="top_navigation_bar_input"> <input @blur="hide_browsing_history1" @focu
Vue音乐--搜索页面11_搜索历史逻辑点击、删除
kingAn123的博客
10-11 639
大概步骤： 目标效果 七、点击歌手li 要点： 点击li添加到输入框 点击x删除当前搜索历史 点击垃圾桶清空搜索历史 （一）、点击添加到输入框 在热门搜索关键词里是一样的逻辑，主要是做好父子组件事件的派发就可以了。 ↓search.vue addQuery(item){ this.$refs.searchbox.setQuery(item) }, （二）、点击...
vue中模糊查询中显示搜索过的历史
qq_24441205的博客
01-12 943
4.定义输入框输入的方法 changeMeasurer 把搜索的关键字存到 上面定义的搜索数据对象measurerOptionsBySearch 中。2.在data中定义存储搜索历史的数据对象 measurerOptionsBySearch。1.在搜索框下添加显示列表ul。3.定义点击历史数据的方法。5.定义显示历史列表的样式。
Vue表单实现历史记录搜索
06-10
要实现Vue表单的历史记录搜索，你可以使用localStorage来存储历史搜索记录，然后在表单中展示这些记录。以下是一个简单的实现示例： 1. 在Vue组件的data中添加一个history数组，用于存储历史搜索记录。 ``` data() { return { history: [] }; } ``` 2. 在表单中添加一个输入框和一个按钮，用于进行搜索。在输入框中添加一个v-model指令，将输入框的值绑定到组件的searchText属性上。按钮的点击事件调用search方法，将搜索内容存储到history数组中。 ``` <template> <div> <input type="text" v-model="searchText" /> <button @click="search">Search</button> </div> </template> <script> export default { data() { return { history: [], searchText: '' }; }, methods: { search() { if (this.searchText) { this.history.push(this.searchText); localStorage.setItem('history', JSON.stringify(this.history)); // perform search } } } }; </script> ``` 3. 在组件的created钩子中，读取localStorage中的历史记录，并将其赋值给history数组。 ``` created() { const history = localStorage.getItem('history'); if (history) { this.history = JSON.parse(history); } } ``` 4. 在表单下方添加一个历史记录列表，展示历史搜索记录。使用v-for指令遍历history数组，将每个搜索记录展示为一个列表项。为了方便用户点击历史记录进行搜索，给每个列表项添加一个@click事件，将点击的记录赋值给searchText属性，并调用search方法进行搜索。 ``` <template> <div> <input type="text" v-model="searchText" /> <button @click="search">Search</button> <ul> <li v-for="record in history" @click="searchText = record; search">{{ record }}</li> </ul> </div> </template> ``` 这样，就可以实现Vue表单的历史记录搜索了。每次进行搜索时，都会将搜索内容存储到localStorage中，下次打开页面时，历史记录会自动加载。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值