Example of WeChat applet implementing global search code highlighting-JS Tutorial-php.cn

Example of WeChat applet implementing global search code highlighting

亚连

Release： 2018-05-28 10:58:39

Original

1474 people have browsed it

This article mainly introduces the example of global search code highlighting in WeChat applet. Now I share it with you and give it as a reference.

Requirements

When I was working on a WeChat applet recently, I needed to achieve global matching and highlight effects when inputting content in the search box. Currently, The idea is to recurse the background to return the data, replace the value of the object with the required dom node, and achieve the highlighting effect through 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>

Copy after login

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

})

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

js css to achieve typing effect

A brief introduction to the use of react redux middleware

Detailed explanation of the loader mechanism of webpack source code

The above is the detailed content of Example of WeChat applet implementing global search code highlighting. For more information, please follow other related articles on the PHP Chinese website!