So erreichen Sie die Ergebnishervorhebung während der globalen Suche

Dieses Mal zeige ich Ihnen, wie Sie die Ergebnishervorhebung während der globalen Suche erreichen. Welche Vorsichtsmaßnahmen es gibt, um die Ergebnishervorhebung während der globalen Suche zu erreichen?

Anforderungen

Als ich kürzlich an einem WeChat-Applet arbeitete, musste ich bei der Eingabe von Inhalten in das Suchfeld globale Übereinstimmungen und Hervorhebungseffekte erzielen , geben Sie die Daten rekursiv im Hintergrund zurück, ersetzen Sie den Wert des Objekts durch den erforderlichen Dom-Knoten und erzielen Sie den Hervorhebungseffekt durch Rich-Text.

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
    })
  }
})

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall hier gelesen haben Artikel, mehr Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

angular4 mehrere Komponenten, die Daten miteinander kommunizieren

Detaillierte Erläuterung der Schritte für Vue als Referenz externe Stildateien

Das obige ist der detaillierte Inhalt vonSo erreichen Sie die Ergebnishervorhebung während der globalen Suche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!