目录

uniapp多组数组 搜索高亮效果demo(整理)

bash 复制代码
<template>
	<view class="mT100">
		<input type="text" v-model="keyword" @input="filterList" placeholder="请输入关键词">
		<ul>
			<li v-for="item in filteredList" :key="item.id">
				<span v-html="highlightKeyword(item.name)"></span>
			</li>
		</ul>

		<ul>
			<li v-for="item in filteredList1" :key="item.id">
				<span v-html="highlightKeyword(item.name)"></span>
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				list: [{
						name: '测试1',
						id: 1
					},
					{
						name: '测试2',
						id: 2
					},
					{
						name: '测试3',
						id: 3
					},
				],
				list1: [{
						name: '测试10',
						id: 1
					},
					{
						name: '测试20',
						id: 2
					},
					{
						name: '测试30',
						id: 3
					},
				],
			};
		},
		computed: {
			filteredList() {
				if (this.keyword === '') {
					return this.list;
				}
				return this.list.filter(item => item.name.includes(this.keyword));
			},
			filteredList1() {
				if (this.keyword === '') {
					return this.list1;
				}
				return this.list1.filter(item => item.name.includes(this.keyword));
			},
		},
		methods: {
			highlightKeyword(text) {
				if (!this.keyword) {
					return text;
				}
				const regex = new RegExp(`(${this.keyword})`, 'gi');
				return text.replace(regex, '<span style="color: red;">$1</span>');
			},
			filterList() {
				// 当关键词变化时,重新过滤列表
				// 可以根据需求调整触发的时机,如在用户输入结束后再触发过滤
				// 这里使用input事件实时响应用户输入
			},
		},
	};
</script>
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
小程序照片合成5 天前
uniapp微信小程序开发工具本地获取指定页面二维码
微信小程序·小程序·uniapp·二维码
奔跑吧邓邓子9 天前
【商城实战(92)】高并发下的商城缓存进阶:从原理到实战
redis·缓存·springboot·uniapp·element plus·商城实战
奔跑吧邓邓子10 天前
【商城实战(74)】数据采集与整理,夯实电商运营基石
springboot·uniapp·element plus·商城实战·商城数据采集与整理
奔跑吧邓邓子18 天前
【商城实战(49)】解锁小程序端适配与优化,让商城飞起来
uniapp·小程序优化·商城实战·小程序适配
奔跑吧邓邓子25 天前
【商城实战(24)】商城性能大揭秘:压力测试与性能监控实战
springboot·压力测试·uniapp·element plus·性能监控·商城实战
奔跑吧邓邓子25 天前
【商城实战(26)】移动端交互优化实战秘籍
spring boot·uniapp·商城实战·移动端交互优化
奔跑吧邓邓子1 个月前
【商城实战(23)】筑牢安全防线,防范常见漏洞
安全·springboot·uniapp·csrf·element plus·sql注入·商城实战
奔跑吧邓邓子1 个月前
【商城实战(22)】商城性能优化秘籍:从前端到后端的实战攻略
redis·缓存·性能优化·springboot·uniapp·element plus·商城实战
ChinaDragonDreamer1 个月前
uniapp:小程序将base64图片字符串保存到手机相册
小程序·uniapp