小程序关键词变色

最新推荐文章于 2023-04-11 11:15:32 发布

小小前端要努力

最新推荐文章于 2023-04-11 11:15:32 发布

阅读量481

点赞数 1

文章标签：小程序

本文链接：https://blog.youkuaiyun.com/phper2020/article/details/113971467

版权

本文介绍了如何在小程序中实现关键词高亮显示。首先，需要创建一个.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 }];
},