微信小程序实现关键词高亮

1.实现效果

关键字高亮.gif

2.实现原理

1.将搜索的值与列表中的每一项进行对比，如果那一项indexOf（搜索值）！=-1，则表示这项中含有该关键字，处理列表，为这一项设置相应的属性。
2.split将字符串和搜索值拆分成数组，循环数组。

3.实现代码

<view class="head flex-row">
  <view class="head_input">
    <image src="/img/search_icon.png" class="search_icon"></image>
    <input type="text" placeholder="搜索" placeholder-class="place_holder" bindinput="getValue" value="{{search}}"></input>
  </view>
  <view class="sha_icon" catchtap="clear_input">取消</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({

  /**
   * 页面的初始数据
   */
  data: {
    search: "",
    filterList: [],
    list: [
      {
        name: " 上海"
      },
      {
        name: " 江苏"
      },
      {
        name: " 江苏南京"
      },
      {
        name: " 江苏宿迁"
      },
      {
        name: " 江苏苏州"
      },
      {
        name: " 四川"
      },
    ]
  },
  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: [], })
    }
  },
  /**
 * 关键字高亮处理
 * @param { String } datalist - 文本
 * @param { String } val - 关键字
 */
  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.源码，关注苏苏的码云！，如果对你有用，一个star即可，是对我的鼓励~