微信小程序实现实时搜索并高亮关键字的功能效果

一、效果图

二、实现流程：

• 1.在文本框中输入关键字key，如“比赛”，检索出比赛相关的列表
  key = 小程序
• 2.处理结果列表：在key的前后加分隔符，如“%%”
• 3.通过第2步的分隔符进行切割，获取新的数组：str.split("%%")
• 4.页面for循环上面的新数组：与key相等，则高亮显示，否则常规样式显示

三、代码实现

1.search-effects.js 部分代码:

// pages/search-effects/search-effects.js
Page({/*** 页面的初始数据*/data: {searchText:'',//文本框内容searchResultList:[],//搜索结果autoFocus: true,//自动聚焦holdKeyboard: true//focus时，点击页面的时候收齐键盘 true:不收起},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},//文本框输入input(e){//   console.log(e)this.setData({searchText:e.detail.value.trim()})//根据名称进行搜索this.getSearchListByName()},//根据名称进行搜索getSearchListByName(){let that = this//模拟数据请求var dataList=[{M_NAME:'小程序教程'},{M_NAME:'2020小程序大全'},{M_NAME:'微信小程序开源框架'},{M_NAME:'微信小程序组件化解决方法'},{M_NAME:'微信小程序API'},{M_NAME:'丰富的微信小程序组件'},{M_NAME:'第三方微信小程序组件'},{M_NAME:'自定义小程序UI组件'},{M_NAME:'小程序可滑动标签的使用'}]var searchResultList = []for(var i=0;i<dataList.length;i++){let obj={M_NAME:dataList[i].M_NAME};//高亮字符串数组obj.searchArray=that.getHilightStrArray(dataList[i].M_NAME,this.data.searchText)searchResultList.push(obj)} that.setData({searchResultList:searchResultList})// wx.request({// 	url: 'http://192.168.0.76:8080/open/getSearchListByName', // 仅为示例，并非真实的接口地址// 	data: {// 		m_name:this.data.searchText// 	},// 	method: 'post',// 	header: {// 		'content-type': 'application/json' // 默认值// 	},// 	success(res) {// 		console.log(res)// 		var searchText = that.data.searchText// 		if (res.data.errcode === 200) {// 			var searchResultList = []// 			//比赛 数据// 			if(res.data.matchList){// 				for(var i=0;i<res.data.matchList.rows.length;i++){// 					let obj={// 						M_NAME:res.data.matchList.rows[i].M_NAME// 					};// 					//高亮字符串数组// 					obj.searchArray=that.getHilightStrArray(res.data.matchList.rows[i].M_NAME,searchText)// 					searchResultList.push(obj)// 				} // 			}// 			that.setData({// 			   searchResultList:searchResultList// 			})// 		}// 	},// 	fail() {// 	}// })},// 返回一个使用key切割str后的数组，key仍在数组中getHilightStrArray(str,key){return str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},
})

2.search-effects.wxml 部分代码:

<!--pages/search-effects/search-effects.wxml-->
<view class="main"><view class="header-search"><image class="searchImg" src="/images/search_icon.png" mode="aspectFill" ></image><input type="text" class="searchInput" focus="{{autoFocus}}" hold-keyborad="true" placeholder="请输入名称进行搜索" placeholder-style="color:#999999" bindinput = "input"></input><view class="clearInput" bindtap = "clearInput" wx:if="{{searchText}}"><image class="clearInputImg" src="/images/clear.png" mode="aspectFill" ></image></view></view><view style="padding: 0 24rpx;"><view class="searchResult" wx:if="{{searchText}}"><view class="searchText" data-type="1" bindtap = "toHandleSearch">搜索"{{searchText}}"</view><view class="border-LR"></view></view><view wx:for="{{searchResultList}}" wx:key="index"><view class="searchResultItem" data-type="2" bindtap = "toHandleSearch"><image class="searchImg2" src="/images/search_icon.png" mode="aspectFill" ></image><view class="searchResultItem-context"><text wx:for="{{item.searchArray}}" wx:for-item="item2"  wx:key="index2" style="{{item2 == searchText?'color:#4E70C7':''}}">{{item2}}</text></view></view><view class="border-item-LR"></view></view></view>
</view>

3.search-effects.wxss代码:

/* pages/search-effects/search-effects.wxss */
.header-search{position: relative;margin: 10rpx 24rpx 40rpx 24rpx;
}
/*搜索图标*/
.searchImg{position: absolute;left: 24rpx;bottom: 18rpx;width: 28rpx;height: 28rpx;
}
/*搜索图标*/
.searchImg2{width: 28rpx;height: 28rpx;
}
/*搜索文本框*/
.searchInput{width: 83%;height: 64rpx;font-size: 28rpx;font-family: PingFang SC;font-style: normal;font-weight: normal;line-height: 64rpx;color: #000000;opacity: 1;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;min-height: unset;background: #f9f9f9;border-radius: 200rpx;padding: 0 58rpx;
}
/*清空文本框view*/
.clearInput{width: 100rpx;height: 64rpx;display: flex;align-items: center;justify-content: center;position: absolute;right: 0;bottom: 0;z-index: 10;
}
/*清空图标*/
.clearInputImg{width: 36rpx;height: 36rpx;flex-shrink: 0;
}/*搜索结果*/
.searchResult .searchText{max-width: 93%;font-family: PingFang SC;font-style: normal;font-weight: normal;font-size: 26rpx;line-height: 26rpx;color: #4e70c7;overflow-x: hidden;white-space: nowrap;text-overflow: ellipsis;padding-bottom: 40rpx;
}
.searchResultItem {display: flex;flex-direction: row;justify-content: flex-start;align-items: center;}
.searchResultItem-context{font-family: PingFang SC;font-style: normal;font-weight: normal;font-size: 26rpx;line-height: 26rpx;color: #000000;margin-left: 20rpx;padding: 24rpx 0;overflow-x: hidden;white-space: nowrap;text-overflow: ellipsis;
}

注意：下面的函数 比较关键

//返回一个使用key切割str后的数组，key仍在数组中
//str：字符串  key：关键字
function getHilightStrArray (str,key) {return str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
}

参考资料：
https://www.jianshu.com/p/86d73745e01c