微信小程序搜索并高亮关键字

https://www.jianshu.com/p/86d73745e01c

<!-- 搜索并高亮关键字 -->
<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>

/* pages/gologin/gologin.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;
}

// 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 () { },
})

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