Comment activer l'applet WeChat pour mettre en évidence le code de recherche global

Cette fois, je vais vous montrer comment faire en sorte que l'applet WeChat fasse une mise en évidence du code de recherche globale. Quelles sont les précautions pour que l'applet WeChat fasse une mise en évidence du code de recherche globale. et jetez un oeil.

Exigences

Lorsque je travaillais récemment sur une applet 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. , renvoie récursivement les données en arrière-plan et remplace la valeur de l'objet par le nœud dom requis, et obtient 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: 'eiolewkfp', age: 'awdqwwdk', address: 'aueifwhefwfheffoewjowef',aihao:['sdsd','sdfsd','sdsf']}, { name: '98797', age: '6544656', address: '65494364' }], // 可以是任何类型的数据
    newJson: '',
    tempText:''
  },
  onLoad: function (options) {
    this.setData({
      newJson:this.data.json
    })
  },
  digui: function (newJson,obj,key) { // 递归方法，来遍历最内层的字符串并通过正则来替换
    var that = this;
    var reg = new RegExp(that.data.tempText,'g');
    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
    })
  }
})

Je crois que vous l'avez maîtrisé après avoir lu le Cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Comment utiliser js pour convertir la chaîne clé-valeur en chaîne json

Utiliser Vue page unique Comment référencer des fichiers de style individuels lors de l'application

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!