uniapp微信小程序搜索关键词在列表中高亮效果

先看效果图:直接上代码:view片段:inputs是搜索关键词的值<view class="text" @click="gsClick(item,index)" v-for="(item,index) in 16" :key="index"><rich-text :nodes="`${this.brightKeyword('百度有限公司',inputs)}`"></r

Other world

1403人浏览 · 2021-12-24 10:55:45

Other world · 2021-12-24 10:55:45 发布

先看效果图:

直接上代码:

view片段:

<view class="text" @click="gsClick(item,index)" v-for="(item,index) in searchList" :key="index">
		<rich-text :nodes="item.companyName"></rich-text>	
</view>

input事件:

inputs是存储关键词内容的字段

//搜索框内容改变事件
inputtext(e) {
	console.log(e);
	if (e != '') {
	// this.list(e)
	this.inputs = e.value;
	}
},

在methods里封装的方法:

//关键词高亮
brightKeyword(val,keyword) {
	if (val.indexOf(keyword) !== -1) {
		return val.replace(keyword, `<font style='color: #24BAD1'>${keyword}</font>`);
	} else {
		return val;
	}
},

实战用法：

//data为请求接口拿到的公司列表数据
//this.inputs为搜索框里的关键词内容
let data = res.data.data
data.forEach(v=>{
	this.searchList.push({
		companyName: this.brightKeyword(v.companyName,this.inputs),
		companyNameF: v.companyName
	});
})