小程序 关键词变色

本文介绍了如何在小程序中实现关键词高亮显示。首先,需要创建一个.wxs文件,然后在wxml中引入并使用该文件。接着,在js文件中进行相应的处理。对于单个字的关键词高亮和多个文字的关键词高亮,分别在wxml和js中有不同的实现方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

单个字

新建一个.wxs结尾的文件

function fn(arr, arg) {
  var result = {
    indexOf: false,
    toString: ''
  }
  result.indexOf = arr.indexOf(arg) > -1;
  result.toString = arr.join(","); return result;
}
module.exports.fn = fn;

在wxml文件中引入并使用文件

<wxs src="./search.wxs" module="mysearch" />
<view class="searchresbox" wx:for="{{list}}" wx:for-item="item1">
	<block wx:for="{{item1}}">
		<text class="{{mysearch.fn(stringRes, item).indexOf?'red':''}}">{{item}}</text>
	</block>
</view>

在js文件中

data: {
	keylist:['我爱你','打死你','啊啊啊','讨厌啊','不不不'],
	list: [],
	stringRes:[]
},
getSearchRes(e){
	let { keylist } = this.data
	var stringRes = e.detail.value.split('')
	let list = []
	keylist.forEach(e => {
		list.push(e.split(''))
	})
	this.setData({
		list:e.detail.value?list:[],
		stringRes
	})
},

多个文字

在wxml文件中

<view class="searchresbox" wx:for="{{list}}" wx:for-item="item1" catchtap="gotoSearch" data-text="{{item1}}">
	<text class="cuIcon-search" style="font-size: 24rpx;margin-right: 12rpx;"></text>
	<block wx:for="{{item1}}">
		<text wx:if="{{item.key == true}}" class="searchcolor1 searchtext">{{item.str}}</text>
		<text wx:else class="searchcolor2 searchtext">{{item.str}}</text>
	</block>
</view>

在js文件中

data: {
	keylist:['我爱你','打死你','啊啊啊','讨厌啊','不不不'],
	list: [],
	stringRes:[]
},
// 键盘输入
getSearchRes(e){
	let { keylist } = this.data
	var stringRes = e.detail.value
	let list = []
	if(stringRes){
		keylist.forEach(e => {
			let reslutDom = this.hilight_word(stringRes,e)
			list.push(reslutDom)
		})
	}
	this.setData({
		list:e.detail.value?list:[],
		stringRes
	})
},
// 根据搜索字分割字符
hilight_word: function (key, word) {    
	let idx = word.indexOf(key), t = [];
 
	if (idx > -1) {
	  if (idx == 0) {
		t =this.hilight_word(key, word.substr(key.length));
		t.unshift({ key: true, str: key });
		return t;
	  }
 
	  if (idx > 0) {
		t =this.hilight_word(key, word.substr(idx));
		t.unshift({ key: false, str: word.substring(0, idx) });
		return t;
	  }
	}
	return [{ key: false, str: word }];
},
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值