1、得到搜索结果
2、通过遍历对每一项的关键字进行替换
3、在微信小程序wxml中用rich-text标签渲染
wxml:
<view wx:for='{
{searchsuggestions}}' wx:key='index'>
<rich-text nodes="{
{item.keyword}}"></rich-text>
</view>
js:
let data = res.result.allMatch//搜索到的数据
data.map((item) =>{
item.keyword = item.keyword.replace(this.data.value,//替换输入框的内容
`<span style="color:skyblue;">${
this.data.value}</span>`)//模板字符串使用span标签设置高亮颜色
})
this.setData({
searchsuggestions: data//替换后的内容赋值
})
效果图: