Wechat applet realizes keyword highlighting

1. Realization effect

2. Realization principle

1. Compare the search value with each item in the list , If that one indexOf（ Search value ）！=-1, It means that this item contains the keyword , Process list , Set the corresponding properties for this item .
2.split Split strings and search values into arrays , Circular array .

3. Implementation code

<view class="head flex-row">
  <view class="head_input">
    <image src="/img/search_icon.png" class="search_icon"></image>
    <input type="text" placeholder=" Search for " placeholder-class="place_holder" bindinput="getValue" value="{
    {search}}"></input>
  </view>
  <view class="sha_icon" catchtap="clear_input"> Cancel </view>
</view>
<view class="con">
  <view class="item" wx:for="{
    { filterList }}" wx:key="index" data-index="{
    { index }}">
    <text wx:for="{
    {item.list}}" class="{
    {i0.set &&'ative'}}" wx:key="idx" wx:for-item="i0">{
    {
    i0.val}}</text>
  </view>
</view>

/* pages/jsCase/keyWordHight/index2.wxss */
.head {
    
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  background: #fff;
}

.head_input {
    
  position: relative;
  flex: 1;
  margin-left: 12rpx;
}

.search_icon {
    
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -15rpx;
  width: 28rpx;
  height: 30rpx;
  padding-left: 23rpx;
}

.head input {
    
  height: 60rpx;
  padding-left: 75rpx;
  font-size: 28rpx;
  border-radius: 30rpx;
  background: #F5F5F5;
}

.place_holder {
    
  font-size: 28rpx;
  color: #999999;
}

.sha_icon {
    
  margin-left: 18rpx;
  font-size: 28rpx;
  color: #333333;
}

.con {
    
  padding-top: 90rpx;
  margin: 0 20rpx;
}

.item {
    
  border-bottom: 1rpx solid rgb(241, 239, 239);
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #333333;
}

.item:last-child {
    
  border-bottom: none;
}

.ative {
    
  color: rgb(76, 156, 221);
}

// pages/jsCase/keyWordHight/index2.js
Page({
    

  /** *  Initial data of the page  */
  data: {
    
    search: "",
    filterList: [],
    list: [
      {
    
        name: "  Shanghai "
      },
      {
    
        name: "  jiangsu "
      },
      {
    
        name: "  Nanjing, Jiangsu "
      },
      {
    
        name: "  Suqian, Jiangsu "
      },
      {
    
        name: "  Suzhou, Jiangsu "
      },
      {
    
        name: "  sichuan "
      },
    ]
  },
  getValue(e) {
    
    let val = e.detail.value;
    this.setData({
     search: val })
    if (val.length > 0) {
    
      let arr = [];
      for (let i = 0; i < this.data.list.length; i++) {
    
        if (this.data.list[i].name.indexOf(val) > -1) {
    
          arr.push({
     name: this.data.list[i].name })
        }
      }
      this.setData({
     filterList: arr, }, () => {
    
        this.getHighlight(arr, val)
      })
    } else {
    
      this.setData({
     filterList: [], })
    }
  },
  /** *  Keyword highlighting  * @param { String } datalist -  Text  * @param { String } val -  keyword  */
  getHighlight(datalist, val) {
    
    datalist.forEach(item => {
    
      let textList = item.name.split("");
      let keyList = val.split("");
      let list = [];
      for (let i = 0; i < textList.length; i++) {
    
        let obj = {
    
          set: false,
          val: textList[i]
        }
        list.push(obj);
      };
      for (let k = 0; k < keyList.length; k++) {
    
        list.forEach(i0 => {
    
          if (i0.val === keyList[k]) {
    
            i0.set = true;
          }
        })
      }
      item.list = list;
    });
    this.setData({
    
      filterList: datalist
    })
  },
  clear_input() {
    
    this.setData({
    
      search: "",
      filterList: []
    })
  }
})

4. Source code , Focus on Su Su's code cloud ！, If it works for you , One star that will do , It's an encouragement to me ~ More applet code demo, Wechat attention Su Su bug