【uni-app】实现搜索框、历史记录等详细操作

已于 2024-12-25 16:02:05 修改
阅读量1.4k 收藏 19
点赞数 15
分类专栏： 笔记 文章标签： uni-app javascript 前端 vue.js 小程序
于 2024-12-11 18:17:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/foreverKOOKV95/article/details/144406960
版权

Uni-app实现搜索框、历史记录传值、点击历史记录跳转页面等操作

文章目录

input输入框:官网教程

v-model 参数:是一个用于实现双向数据绑定的指令。它允许将表单元素的值与Vue实例的数据对象属性进行关联，从而实现数据的同步更新。

使用v-model指令绑定表单元素的值。例如代码这里的<input type="text" value="" placeholder="搜索" v-model="keyword" @confirm="searchAction" />，这里将input元素的值绑定到了实例的keyword属性上。

网页代码

<template>
	<view>
		<view class="form">
			<view class="form-input">
                <!-- 可代替使用uniapp扩展组件的uni-icons 具体在https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html
				-->
				<image src="../../static/images/icon-search.png" mode="widthFix"></image>
				<input type="text" value="" placeholder="搜索" v-model="keyword" @confirm="searchAction" />
			</view>
			<view class="cancel" @click="navigateBack">取消</view>
		</view>
        <view class="history">
			<view class="history-head">
				<text>搜索历史</text>
				<image src="../../static/images/icon-trash.png" mode="widthFix" @click="cleanHistory"></image>
			</view>
			<view class="history-list">
				<scroll-view v-for="item in historyList" @click="navigateToDetail(item)">
					{{ item }}
				</scroll-view>
			</view>
		</view>
	</view>
</template>

style样式(自由发挥)

一定要加lang=“scss”，这样才可以完成嵌套样式操作

<style lang="scss" scoped>
	.form {
		background: white;
		display: flex;
		align-items: center;
		padding: 30rpx;

		.cancel {
			color: #666;
			margin-left: 20rpx;
			font-size: 28rpx;
		}
	}

	.form-input {
		display: flex;
		align-items: center;
		flex: 1;
		background-color: #f5f5f5;
		border-radius: 80rpx;
		padding: 0 10rpx;

		image {
			display: block;
			width: 36rpx;
			margin: 0 20rpx;
			flex-shrink: 0;
		}

		input {
			display: block;
			flex: 1;
			font-size: 28rpx;
			color: black;
			height: 70rpx;
			line-height: 70rpx;
		}
	}

	.history {
		background: white;
		padding: 30rpx;

		.history-head {
			display: flex;
			align-items: center;

			text {
				display: block;
				flex: 1;
				font-size: 32rpx;
				font-weight: bold;
				color: black;
			}

			image {
				display: block;
				width: 40rpx;
			}
		}
	}

	.history-list {
		scroll-view {
			display: inline-block;
			vertical-align: top;
			background-color: #f1f1f1;
			color: #333;
			font-size: 18px;
			padding: 10rpx 20rpx;
			border-radius: 40rpx;
			margin: 20rpx 20rpx 0 0;
			width: fit-content;
		}
	}
</style>

接口版脚本

//引入的模板，config.js 通常包含应用程序的配置信息，例如API的基础URL、全局变量、常量等。
import config from '../../utils/config.js';
//request.js 通常封装了网络请求的逻辑，使用了 uni.request 或其他HTTP库来发送请求。
import request from '../../utils/request.js';
//utils.js 通常包含一些通用的工具函数或实用程序，例如日期格式化、字符串处理、数组操作等。
import utils from '../../utils/utils.js';

return {
	keyword:'',//默认为空
	historyList:[]//数组默认为空
},

method代码

searchAction(e) {
    // 保存历史记录
    if (this.keyword !== '' && !this.historyList.includes(this.keyword)) {
        // 查询是否有口令，直接跳到详情页
        this.codeSearch();
    } else if (this.historyList.includes(this.keyword)) {
        this.codeSearch();
    } else {
        return uni.showToast({
            title: '请输入你要搜索的创作者',
            icon: 'none'
        });
    }
},

async codeSearch() {
    // 显示一个加载提示框，提示用户正在查询中
    uni.showLoading({
        title: '正在查询中...'
    });

    let _this = this; // 保存当前上下文的引用

    // 发送一个POST请求到指定的API地址，并等待响应
    const r = await request({
        url: `${接口.API}api/文件名/search`,
        method: 'POST',
        data: {
            code: this.keyword // 将当前对象的keyword属性作为请求数据的一部分发送
        }
    });

    // 隐藏加载提示框
    uni.hideLoading();

    // 检查响应的错误码是否为0（表示成功）
    if (r.error_code === 0) {
        // 如果成功，清空历史记录列表
        this.historyList = [];
        // 将当前的keyword添加到历史记录列表的最前面
        this.historyList.unshift(this.keyword);
        // 将更新后的历史记录列表保存到本地存储
        uni.setStorageSync('historyList', this.historyList);
        // 导航到详情页面，并传递用户ID和用户代码作为参数
        uni.navigateTo({
            //这里的url写你要跳转的详情页面后面跟着你要查询的用户id
            url: '/pages/talent/detail?id=' + r.data.user_id + '&code=' + r.data.user_code
        });
        console.log(r.error_code); // 打印错误码（这里应该是0）
    } else {
        // 如果失败，打印当前的历史记录列表
        console.log(this.historyList);
        // 显示一个提示框，告知用户查询失败的原因
        return uni.showToast({
            title: r.msg, // 使用响应中的消息内容作为提示信息
            icon: 'none' // 不显示图标
        });
    }

    // 输入完成后清空搜索框
    this.keyword = '';
}

onLoad() {
	//页面展示出存储到本地的历史记录数据
	const historyList = uni.getStorageSync('historyList');
	this.historyList = historyList;
},

 cleanHistory() {
	uni.showModal({
		content: '是否清除历史记录',
        success: (res) => {
             if (res.confirm) {
             	// 清除本地存储中的历史记录数据
             	uni.removeStorageSync('historyList');
             	this.historyList = [];
             }
        }
    });
},

//这一步是为了实现在历史记录中点击数据可以继续转到对应的详细页面
//传入参数item，也就是你在数组里的数据
navigateToDetail(item){
	//将传入的参数赋值给搜索的参数
    this.keyword = item;
    //继续检查此数据是否存在数组、历史记录中，是的话直接跳转到详情页面。
    this.searchAction();
}

navigateBack() {
	//如果不想搜索，返回上一级页面
	uni.navigateBack();
},

json文件版脚本

  1. 首先创建一个json文件
[
    {
        "id": "1",
        "name": "创作者A",
        "code": "CODE123"
    },
    {
        "id": "2",
        "name": "创作者B",
        "code": "CODE456"
    }
]
  1. 在你的页面或组件中导入这个JSON文件，并使用它作为数据源。修改你的export default部分如下：
import data from '../../utils/data.json'; // 导入本地数据

keyword: '',
historyList: [],
localData: data // 使用本地数据

onLoad() {
    //在页面加载时，从本地存储中读取历史记录并赋值给historyList。
    //如果本地存储中没有历史记录，则初始化为空数组。
    this.historyList = uni.getStorageSync('historyList') || [];
},

方法解释同上（其他版本）

searchAction(e) {
    if (this.keyword !== '' && !this.historyList.includes(this.keyword)) {
        this.codeSearch();
    } else if (this.historyList.includes(this.keyword)) {
        this.codeSearch();
    } else {
        return uni.showToast({
            title: '请输入你要搜索的创作者',
            icon: 'none'
        });
    }
},

async codeSearch() {
    uni.showLoading({
        title: '正在查询中...'
    });
    // 使用本地数据进行搜索
    const foundItem = this.localData.find(item => item.code === this.keyword);
    uni.hideLoading();
    // 如果本地数据存在
    if (foundItem) {
        //在本地数据中查找与用户输入的关键词匹配的项
        this.historyList = [this.keyword, ...this.historyList];
        // 将当前的keyword添加到历史记录列表的最前面
        this.historyList.unshift(this.keyword);
        // 将更新后的历史记录列表保存到本地存储
        uni.setStorageSync('historyList', this.historyList);
        // 导航到详情页面，并传递用户ID和用户代码作为参数
        uni.navigateTo({
            url: '/pages/talent/detail?id=' + foundItem.id + '&code=' + foundItem.code
        });
    } else {
        return uni.showToast({
            title: '未找到相关创作者',
            icon: 'none'
        });
    }
    //输入完成后清空搜索框
    this.keyword = '';
},

cleanHistory() {
    uni.showModal({
        content: '是否清除历史记录',
        success: (res) => {
            if (res.confirm) {
                // 清除本地存储中的历史记录数据
                uni.removeStorageSync('historyList');
                //重置数组
                this.historyList = [];
            }
        }
    });
},

navigateBack() {
	//返回上一级页面
    uni.navigateBack();
},

//这一步是为了实现在历史记录中点击数据可以继续转到对应的详细页面
//传入参数item，也就是你在数组里的数据
navigateToDetail(item){
	//将传入的参数赋值给搜索的参数
    this.keyword = item;
    //继续检查此数据是否存在数组、历史记录中，是的话直接跳转到详情页面。
    this.searchAction();
}

无外部文件源版脚本

keyword:'',//默认为空
historyList:[],//数组默认为空
localData: [
	{ id: "1", name: "创作者A", code: "CODE123" },
	{ id: "2", name: "创作者B", code: "CODE456" }
] // 直接在代码中定义数据

onLoad() {
	//在页面加载时，从本地存储中读取历史记录并赋值给historyList。
	//如果本地存储中没有历史记录，则初始化为空数组。
	this.historyList = uni.getStorageSync('historyList') || [];
},

methods代码

searchAction(e) {
	//如果你输入的数据不为空并且不存在于历史记录数组中
	//就在codeSearch方法中新增到数组并将数据放置于最前
	if (this.keyword !== '' && !this.historyList.includes(this.keyword)) {
		this.codeSearch();
		//写这个是因为发现被存入历史记录的数据无法再次进行搜索
		//检查关键词是否在历史记录数组中，在的话就删除此数据（codesearch方法中的初始化数组），重新传入。
	} else if (this.historyList.includes(this.keyword)) {
		this.codeSearch();
    } else {
        return uni.showToast({
        	title: '请输入你要搜索的内容',
        	icon: 'none'
        });
     }
},

async codeSearch() {
	// 显示一个加载提示框，提示用户正在查询中
	uni.showLoading({
		title: '正在查询中...'
	});
	// 使用本地数据进行搜索
	const foundItem = this.localData.find(item => item.code === this.keyword);
	// 隐藏加载提示框
	uni.hideLoading();
	// 如果本地数据存在
	if (foundItem) {
		//在本地数据中查找与用户输入的关键词匹配的项
		this.historyList = [this.keyword, ...this.historyList];
		// 将当前的keyword添加到历史记录列表的最前面
		this.historyList.unshift(this.keyword);
		// 将更新后的历史记录列表保存到本地存储
		uni.setStorageSync('historyList', this.historyList);
		// 导航到详情页面，并传递用户ID和用户代码作为参数
		uni.navigateTo({
			url: '/pages/talent/detail?id=' + foundItem.id + '&code=' + foundItem.code
        });
	} else {//如果失败
		// 显示一个提示框，告知用户查询失败的原因
        return uni.showToast({
        // 使用响应中的消息内容作为提示信息,可以直接写明查询失败的原因
        	title: r.msg,
        	icon: 'none'//不显示图标
        });
    }
    //输入完成后清空搜索框
    this.keyword = '';
},

cleanHistory() {
	uni.showModal({
		content: '是否清除历史记录',
		success: (res) => {
			if (res.confirm) {
				// 清除本地存储中的历史记录数据
				uni.removeStorageSync('historyList');
                //重置数组
                this.historyList = [];
            }
        }
    });
},

navigateBack() {
	//取消搜索操作
	uni.navigateBack();
},

//这一步是为了实现在历史记录中点击数据可以继续转到对应的详细页面
//传入参数item，也就是你在数组里的数据
navigateToDetail(item){
	//将传入的参数赋值给搜索的参数
    this.keyword = item;
    //继续检查此数据是否存在数组、历史记录中，是的话直接跳转到详情页面。
    this.searchAction();
}

最终效果展示（有无外部数据源都一样,只有样式不一样）

搜索后的界面

在这里插入图片描述
在这里插入图片描述

uni-app - 详细实现搜索框+ 历史记录功能，每次搜索时都会留下历史记录并且支持一键清空（类似美团淘宝等平台的搜索框，点击进入一个新页面进行搜索并留下搜索记录功能），提供详细示例源码，一键复制！
王二红
08-02 4134
uni-app，微信小程序，h5网页网站，安卓苹果app，详细实现搜索框和历史记录功能，前端如何实现搜索历史记录，搜索历史记录功能（纯前端实现），，uniapp实现搜索历史功能，搜索-历史记录，前端怎么如何实现搜索历史记录，uni-app搜索历史记录功能实现，搜索、历史记录功能简单实现，实现搜索商品和历史记录的功能，Uni-app实现历史搜索，uni-app使用setStorageSync存储历史搜索记录，搜索页功能模块，uniapp实现搜索功能详细步骤前端开发，uniapp中实现搜索功能和历史记录，uni
uni-app搜索-历史记录
Debug的博客
03-23 1629
效果图 <template> <view> <!-- 搜索框 --> <view class="search"> <view style="display: flex;align-items: center;"> <!-- @confirm="search" 点击 --> <input class="searchInput" v-model="inputValue" @confirm="sear
uniapp 简单的可滑动搜索框（css动画）
王吉吉的博客
09-15 1613
uniapp 简单的可滑动搜索框（css动画） 效果图 首先，组件的html <template> <view class="all"> <view class="icon" :class="[bgColor,size]"> <view class="icon_cirle" @click="seachSelect"> <icon type="search" color="#
【uniapp小程序】—— 配置首页搜索框
热门推荐
qq_49002903的博客
09-07 7万+
本篇文章为小程序专栏中的《配置首页搜索框》案例展示，希望能对诸君有所帮助。本次配置为三端：APP端、H5端、小程序端。点击查看小程序专栏。
uniapp前端实现搜索框功能
最新发布
Dbjohns的博客
03-18 192
实现思路： 左右两个盒子div的方式实现。实现结果：实现搜索框的这个功能。
uni-app - 详细实现搜索框+ 历史记录功能+点击历史记录快速重新搜索
wssen321的博客
07-17 844
搜索
uniapp搜索框
User_XuKang的博客
01-04 3749
HTML块 <input type="text" placeholder="输入你要搜索的内容" class="inputs" confirm-type="search" @confirm="inputConfirm" @input="onKeyInput" placeholder-style='color:#a5c4c7'> <image src="../../static/images/search.png" mode="" @click="search">
uni-app商城（五）搜索框
R·ZORO的博客
05-27 2257
- 输入事件的函数，防抖处理，防止请求过多次搜索 - 对搜索历史数据持久化本地存储 - 点击关键字跳转详情页 - 保存搜索关键词
uni-app实现搜索功能
qq_60077855的博客
07-02 1万+
uniapp实现简单的搜索功能
uniapp实现搜索功能详细步骤【前端开发】
2401_84093899的博客
05-06 2011
最后一句是加载用户的头像，这一块是由于阿帕奇服务器会将用户上传的头像转成一个固定格式的url，因此可以用这行代码拼接出头像的url，从而把头像渲染。同样是后端定义的一个变量名，而this.friendName是前端捕获的用户输入在搜索框中的数据，这个数据表示了用户想要搜索的好友的名称。需要注意的一点是，这里的。这种情况下，在回调之后，会将搜索者自己的用户信息渲染出来，但与普通的搜索结果不同的是，此时。这种情况下，在回调之后，会将这个好友的用户信息渲染出来，但与普通的搜索结果不同的是，此时。
uni-app实现搜索历史记录和去重、缓存
05-24
要实现搜索历史记录和去重、缓存，可以使用uni-app提供的本地存储功能。 首先，需要定义一个对象用来保存搜索历史记录，例如： ```javascript const history = { list: [], // 保存搜索历史的数组 maxLen: 10, /...
uni-app 美食搜索mpvue-FG-master
04-10
1. **界面设计**：利用uni-app提供的组件库，设计出美观且易用的美食搜索界面，包括搜索框、分类筛选、搜索结果展示等。 2. **数据获取**：通过调用第三方美食API，获取美食的图片、名称、简介、做法等信息，或者...
uniapp的实时搜索框
SeverusYang的博客
04-27 680
如果用户输入了关键字，那么我们就启用检索：this.tableData.filter（），我们要根据{{this.applicant}}进行检索，则item.applicant.includes（this.searchValue)，即搜索applicant中包含this.searchValue的数据项。我们的目的是让用户在搜索框中输入用户名的关键字，实时展现搜索结果。这里我们已经用v-model=”{{searchValue}}"双向绑定了用户的输入内容，下面我们来写js部分。
uni-app学习03 首页的搜索框
qq_51575392的博客
07-03 396
【代码】uni-app学习03 首页的搜索框。
打造高效搜索体验：UniApp 搜索框功能实现全解析
m0_57836225的博客
01-31 1060
在开发 UniApp 应用时，搜索功能是提升用户体验的关键一环。本文将详细介绍如何一步步实现搜索页面的基本结构渲染、搜索框自动获取焦点、防抖处理等功能，并附上完整代码示例，帮助开发者快速上手。
uniapp实现搜索页面以及搜索功能思路分享
weixin_56150756的博客
11-24 4474
uniapp搜索页面搜索功能思路分享，很完整的一份uniapp搜索功能思绪共享，希望能帮到大家
【uniapp】实现历史搜索功能
wffcn的博客
06-12 490
实现历史搜索功能
uniapp-历史搜索记录
Anorry的博客
09-11 1267
大概就是用户搜索了某个关键字 然后搜索的关键字可以持久的保存下来。下次打开搜索的时候可以达到快速点击搜索的效果。很多搜索场景内都能用到这个功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值