Maison > Article > interface Web > Exemple d'applet WeChat implémentant la mise en évidence du code de recherche globale

Exemple d'applet WeChat implémentant la mise en évidence du code de recherche globale

亚连original: 2018-05-28 10:58:391458parcourir

Cet article présente principalement l'exemple de mise en évidence du code de recherche globale dans l'applet WeChat. Maintenant, je le partage avec vous et le donne comme référence.

Exigences

Lorsque je travaillais récemment sur un mini-programme WeChat, j'avais besoin d'obtenir une correspondance globale et des effets de surbrillance lors de la saisie de contenu dans le champ de recherche. Actuellement, l'idée est de récurer l'arrière-plan pour renvoyer les données, de remplacer la valeur de l'objet par le nœud dom requis et d'obtenir l'effet de mise en évidence grâce au texte riche.

Code

wxml :

<view class=&#39;homePage&#39;>
  <input bindinput="bindKeyInput"></input>
  <view wx:for="{{newJson}}" wx:for-item=&#39;item&#39; 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=&#39;sitem&#39; wx:key>
      <rich-text nodes="{{sitem}}"></rich-text>  
    </view>
  </view>
</view>

js :

//index.js
const app = getApp()

Page({
  data: {
    json: [{ name: &#39;eiolewkfp&#39;, age: &#39;awdqwwdk&#39;, address: &#39;aueifwhefwfheffoewjowef&#39;,aihao:[&#39;sdsd&#39;,&#39;sdfsd&#39;,&#39;sdsf&#39;]}, { name: &#39;98797&#39;, age: &#39;6544656&#39;, address: &#39;65494364&#39; }], // 可以是任何类型的数据
    newJson: &#39;&#39;,
    tempText:&#39;&#39;
  },
  onLoad: function (options) {
    this.setData({
      newJson:this.data.json
    })
  },
  digui: function (newJson,obj,key) { // 递归方法，来遍历最内层的字符串并通过正则来替换
    var that = this;
    var reg = new RegExp(that.data.tempText,&#39;g&#39;);
    if (newJson.constructor == Array) { 
      newJson.forEach(function (item,index) {
        if (item.constructor == String){
          obj[key].splice(index, 1, item.replace(reg, "<span style=&#39;color:red&#39;>" + that.data.tempText + "</span>"))
        }else{
          that.digui(item, newJson);
        }
      });
    } else if (newJson.constructor == Object) {
      var json = {};
      for (var key in newJson) {
        json[key] = newJson;
        that.digui(newJson[key],newJson,key);
      }
    } else if (newJson.constructor == String) { // 这里做全局替换
      if(key){
        obj[key] = newJson.replace(reg, "<span style=&#39;color:red&#39;>" + that.data.tempText + "</span>")
      }
    }
  },
  bindKeyInput: function (e) { // 每次输入来监听键盘，处理匹配的数据
    var text = e.detail.value;
    this.setData({
      tempText:text
    })
    var newJson = JSON.parse(JSON.stringify(this.data.json)); // 实现深复制
    
    this.digui(newJson);
    this.setData({
      newJson:newJson
    })
  }

})

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus