uniapp搜索结果关键词改色

template

<template>
	<view class="content">
		<view class="top-bar">
			<view class="search-div">
				<input type="search" placeholder="搜索" class="search" @input="search"
				 placeholder-style="color:#aaa;font-weight:400;" />
				 <image src="../../static/images/index/search.png" class="search-img"></image>
			</view>
			<view class="top-bar-right">
				<view class="text" @tap="backOne">取消</view>
			</view>
		</view>
		<view class="main">
			<view class="search-user result">
				<view class="title" v-if="userarr.length>0">用户</view>
				<view class="list user" v-for="(item,index) in userarr" :key="index">
					<view class="left">
						<image :src="item.img"></image>
						<view class="names">
							<view class="name" v-html="item.name">
							</view>
						</view>
					</view>
					<view class="right-bt send" v-if="item.tip==1">发消息</view>
					<view class="right-bt add" v-if="item.tip==0">加好友</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

script

import datas from '../../commons/js/datas.js'
export default{
	data(){
		return{
			userarr:[]
		}
	},
	onShow() {
		
	},
	methods:{
		// 获取关键词
		search:function(e){
			//console.log(e.detail.value)
			this.userarr = []
			let searchval = e.detail.value
			if(searchval.length>0){
				console.log(searchval)
				this.searchUser(searchval)
			}
		},
		// 寻找关键词匹配的用户
		searchUser:function(e){
			
			let arr = datas.friends()
			// let exp = eval("" + e + "")
			let exp = e
			arr.forEach((item,index)=>{
				// console.log(item.name)
				if(item.name.search(e) != -1 || item.contentText.search(e) != -1){
					
					this.isFriend(arr[index])
					arr[index].img = '../../static/images/img/' + item.img
					arr[index].name = item.name.replace(exp,"<span style='color:#4AAAFF'>"+e+"</span>")
					this.userarr.push(arr[index]);
				}
				
			})
			// console.log(this.userarr)
		},
		// 判断是否为好友
		isFriend:function(e){
			let tip = 0;
			let arr = datas.isFriend()
			// console.log(e)
			// console.log(arr)
			arr.forEach((item,index)=>{
				// console.log(item)
				if(item.friend == e.id){
					tip = 1
				}
			})
			e.tip = tip
			// console.log(tip)
		},
		
	}
}

style.css

@import "../../commons/css/mycss.scss";
.top-bar{
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid $uni-border-color;
	.search-div{
		width: calc(100% - 100rpx);
		box-sizing: border-box;
		padding: 14rpx 18rpx $uni-spacing-col-base;
		display: flex;
		justify-content: start;
		align-items: center;
		position: relative;
	}
	.search{
		padding: 0 60rpx 0 12rpx;
		width: 600rpx;
		height: 60rpx;
		background: $uni-bg-color-grey;
		border-radius: 10rpx;
		position: relative;
		font-size: 28rpx;
	}
	.search-img{
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
		position: absolute;
		top: 22rpx;
		right: 30rpx;
	}
	.text{
		font-size: 28rpx !important;
	}
}
.main{
	padding: 188rpx $uni-spacing-col-base;
	.result{
		padding-top: $uni-spacing-col-base;
		.title{
			font-size: 44rpx;
			font-weight: 600;
			color: $uni-text-color;
			line-height: 60rpx;
			font-family: PingFangSC-Semibold;
		}
		.list{
			display: flex;
			justify-content: space-between;
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 0;
			.left{
				display: flex;
				justify-content: start;
			}
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: $uni-border-radius-base;
			}
			.names{
				padding-left: $uni-spacing-col-base;
				display: flex;
				align-items: center;
			}
			.name{
				font-size: 32rpx;
				font-weight: 400;
				color: $uni-text-color;
				line-height: 50rpx;
				font-family: PingFangSC-Regular;
			}
			.right-bt{
				width: 120rpx;
				height: 48rpx;
				
				border-radius: 24rpx;
				font-size:$uni-font-size-sm;
				
				line-height: 48rpx;
				text-align: center;
				margin-top: 16rpx;
			}
			.send{
				background: $uni-color-primary;
				color: $uni-text-color;
			}
			.add{
				background: rgba(74,170,255,0.10);
				color:#4AAAFF;
			}
		}
	}
}

datas.js

export default{
	friends:function(){
		let friendarr = [
			{
				id:1,
				img:'2.jpg',
				tip:2,
				name:'小兔崽子',
				time:new Date(),
				contentText:'打游戏啦'
			},
			{
				id:2,
				img:'2.jpg',
				tip:99,
				name:'小坏蛋',
				time:new Date(),
				contentText:'PHP是世界上最好的语言'
			},
			{
				id:3,
				img:'2.jpg',
				tip:2,
				name:'小兔土豆',
				time:new Date(),
				contentText:'打游戏啦'
			},
			{
				id:4,
				img:'2.jpg',
				tip:0,
				name:'小坏蛋坏的很',
				time:new Date(),
				contentText:'PHP是世界上最好的语言'
			},
			{
				id:5,
				img:'2.jpg',
				tip:0,
				name:'小兔崽子菜的很',
				time:new Date(),
				contentText:'打游戏啦'
			},
			{
				id:6,
				img:'2.jpg',
				tip:0,
				name:'小猪',
				time:new Date(),
				contentText:'PHP是世界上最好的语言'
			},
			{
				id:7,
				img:'2.jpg',
				tip:2,
				name:'小兔崽子哈哈',
				time:new Date(),
				contentText:'打游戏啦'
			},
			{
				id:8,
				img:'2.jpg',
				tip:2,
				name:'小坏蛋你好',
				time:new Date(),
				contentText:'PHP是世界上最好的语言'
			},
			{
				id:9,
				img:'2.jpg',
				tip:2,
				name:'小坏蛋你在干嘛',
				time:new Date(),
				contentText:'PHP是世界上最好的语言'
			},
			{
				id:10,
				img:'2.jpg',
				tip:2,
				name:'小坏蛋你在玩什么',
				time:new Date(),
				contentText:'PHP是世界上最好的语言'
			},
			{
				id:11,
				img:'2.jpg',
				tip:2,
				name:'小坏蛋你好',
				time:new Date(),
				contentText:'PHP是世界上最好的语言'
			}
		]
		return friendarr
	},
	// 好友关系
	isFriend:function(){
		let isfriend = [
			{
				userid:1,
				friend:2,
			},
			{
				userid:1,
				friend:5,
			},
			{
				userid:1,
				friend:6,
			},
			{
				userid:1,
				friend:8,
			}
		]
		return isfriend
	}
}