微信小程序实现全局搜索代码高亮的示例

需求

最近在做微信小程序的时候，需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果，目前的思路是，递归后台来返回的数据，并将对象的value值替换为需要的dom节点，并且通过rich-text来实现，高亮效果。

代码

wxml:

<view class='homePage'>
  <input bindinput="bindKeyInput"></input>
  <view wx:for="{{newJson}}" wx:for-item='item' wx:key>
    <rich-text nodes="{{item.name}}"></rich-text>  
    <rich-text nodes="{{item.address}}"></rich-text>  
    <rich-text nodes="{{item.age}}"></rich-text>
    <view wx:if="{{item.aihao}}" wx:for="{{item.aihao}}" wx:for-item='sitem' wx:key>
      <rich-text nodes="{{sitem}}"></rich-text>  
    </view>
  </view>
</view>

js:

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

js+css实现打字效果

简单介绍react redux的中间件的使用

webpack源码之loader机制详解

以上就是微信小程序实现全局搜索代码高亮的示例的详细内容，更多请关注Gxl网其它相关文章！