Heim > Web-Frontend > js-Tutorial > Hauptteil

So erreichen Sie die Ergebnishervorhebung während der globalen Suche

php中世界最好的语言
Freigeben: 2018-05-02 16:50:46
Original
1713 Leute haben es durchsucht

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>
Nach dem Login kopieren

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
    })
  }
})
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!