微信小程序搜索关键词高亮

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//替换后的内容赋值
      })

效果图:

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_49295900/article/details/108201401