uniapp简单实现搜索--历史记录功能

点击搜索时候,将搜索的值存入本地记录并展示,并且有清空历史记录功能。

代码直接贴上:

复制代码
<template>
	<view>
		<!-- 搜索框 -->
		<view class="search">
			<view style="display: flex;align-items: center;">
				<text class="iconfont icon-sousuo position-absolute text-muted"></text>
				<input class="searchInput" v-model="inputValue" @confirm="search" placeholder="搜索" type="text" />
			</view>
			<view>取消</view>
		</view>
		<!-- 搜索框 -->

		<!-- 搜索历史 -->
		<view class="searchHistory">
			<view style="display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;padding: 0px 5px;">
				<view>搜索历史:</view>

				<view style="color: red;font-size: 28px;" @click="empty">×</view>
			</view>
			<view class="searchHistoryItem">
				<view v-for="(item, index) in searchHistoryList" :key="index">
					<text>{{ item }}</text>
				</view>
			</view>
		</view>
		<!-- 搜索历史 -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			inputValue: '',
			searchHistoryList: [] //搜索出来的内容
		};
	},
	methods: {
		search() {
			if (this.inputValue == '') {
				uni.showModal({
					title: '搜索内容不能为空'
				});
			} else {
				if (!this.searchHistoryList.includes(this.inputValue)) {
					this.searchHistoryList.unshift(this.inputValue);
					uni.setStorage({
						key: 'searchList',
						data: JSON.stringify(this.searchHistoryList)
					});
				} else {
					//有搜索记录,删除之前的旧记录,将新搜索值重新push到数组首位
					let i = this.searchHistoryList.indexOf(this.inputValue);
					this.searchHistoryList.splice(i, 1);
					this.searchHistoryList.unshift(this.inputValue);
					uni.showToast({
						title: '不能重复添加'
					});
					uni.setStorage({
						key: 'searchList',
						data: JSON.stringify(this.searchHistoryList)
					});
				}
			}
		},
		//清空历史记录
		empty() {
			uni.showToast({
				title: '已清空'
			});
			uni.removeStorage({
				key: 'searchList'
			});

			this.searchHistoryList = [];
		}
	},
	async onLoad() {
		let list = await uni.getStorage({
			key: 'searchList'
		});
		// console.log(list,'历史记录----');
		if(list[1]&&list[1].data.length>0){			
	    	this.searchHistoryList = JSON.parse(list[1].data);
		}

		
	}
};
</script>

<style>
.search {
	width: 100%;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0px 15px;
}
.searchInput {
	background-color: #f8f9fa;
	width: 220px;
	margin-left: 5px;
}
.searchHistory {
	width: 100%;
	margin-top: 5px;
}
.searchHistoryItem {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.searchHistoryItem view {
	/* width: 50px; */
	height: 20px;
	border: 1px solid #eee;
	margin: 0px 5px;
}
</style>
相关推荐
呼啦啦呼_5 小时前
Echarts自定义地图显示区域,显示街道学校等区域,对原有区域拆分
前端
浩星5 小时前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui
技术钱5 小时前
element plus 多个form校验
前端
yume_sibai6 小时前
HTML HTML基础(3)
前端·html
米花丶6 小时前
JSBridge安全通信:iOS/Android桥对象差异与最佳实践
前端·webview
唐•苏凯6 小时前
ArcGIS Pro 遇到严重的应用程序错误而无法启动
开发语言·javascript·ecmascript
萌萌哒草头将军6 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。7 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
龙傲天6667 小时前
Scala的面向对象和函数式编程特性 Idea环境搭建和输入输出
前端
蓝色海岛7 小时前
element-ui表格嵌套表格,鼠标移入时样式错乱-问题调研及处理办法
前端