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>
相关推荐
nbsaas-boot2 天前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++
weixin_ab13 天前
实战记录:minapp框架下跨机型接口调用顺序引发的兼容性问题
uniapp·机型兼容性问题
菌菇汤15 天前
微信小程序传参过来了,但是数据没有获取到
微信小程序·小程序·uniapp
等风也在等着你15 天前
uniapp评价组件
uniapp
weixin_ab17 天前
Uniapp 中 onShow 与 onLoad 的执行时机解析
uniapp
满分观测网友z18 天前
CSS实现元素撑满剩余空间的5种方法
uniapp
~央千澈~1 个月前
UniApp X:鸿蒙原生开发的机会与DCloud的崛起之路·优雅草卓伊凡
uni-app·uniapp
MaCa .BaKa1 个月前
39-居住证管理系统(小程序)
java·vue.js·spring boot·mysql·小程序·maven·uniapp
佛系菜狗1 个月前
【菜狗work前端】小程序加if判断时不及时刷新 vs Web
微信小程序·uniapp·web
HumoChen992 个月前
GZip+Base64压缩字符串在ios上解压报错问题解决(安卓、PC模拟器正常)
android·小程序·uniapp·base64·gzip