uniapp多组数组 搜索高亮效果demo(整理)
2024-01-10 11:33:59
<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>
文章来源:https://blog.csdn.net/qq_38881495/article/details/135496481
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!