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>
相关推荐
har01d3 天前
在 uniapp 里使用 unocss,vue3 + vite 项目
前端·uni-app·vue·uniapp·unocss
q5507071776 天前
uniapp/uniappx实现图片或视频文件选择时同步告知权限申请目的解决华为等应用市场上架审核问题
android·图像处理·uni-app·uniapp·unix
胡斌附体10 天前
小程序省市级联组件使用
前端·javascript·小程序·uniapp·picker级联组件
meng半颗糖10 天前
uniapp 基础(三)
前端·uniapp·notepad++·uniapp基础
ZEGO即构开发者14 天前
如何用即构ZEGO SDK和uni-app开发一款直播带货应用?
uniapp·实时音视频·直播·电商直播
脑袋大大的16 天前
从“PPT动画”到“丝滑如德芙”——uni-app x 动画性能的“终极奥义”
前端·javascript·nginx·uni-app·uniapp·app开发·混合开发
程序员_Rya19 天前
如何用即构ZEGO SDK和uni-app开发一款直播带货应用?
uniapp·直播sdk·小程序直播·电商直播
脑袋大大的25 天前
跨端分栏布局:从手机到Pad的优雅切换
javascript·uni-app·uniapp·安卓·鸿蒙·app开发·混合开发
「、皓子~1 个月前
AI创作系列第22篇:前端缓存与更新机制重构 - 表情包系统的全面升级
前端·缓存·重构·uniapp·开源软件·im·社交软件
雪碧聊技术1 个月前
pages.json页面路由中,globalStyle的各个属性
uniapp·pages.json·globalstyle的属性