微信小程序实现⭐本地实时搜索⭐并给关键词高亮

来源博客：【Harryの心阁】

1. 组件封装

样式图展示：

2. 主要js代码

// components/search/search.js\
import config from '../../config/config.js'
const wxRequest = require('../../utils/wxRequest.js')
let search_url = config.getJsonSearch
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    classStyle: false,
    allData: [],
    res_list: [],
    key: ''
  },
  // 进入页面就开始本地的请求
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () {
      this.getJsonData()
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    clickS() {
      this.setData({
        classStyle: !this.data.classStyle
      })
    },
    Nav_a(e) {
      let { con } = e.currentTarget.dataset
      let data = ''
      switch (con) {
        case "1":
          data = 'https://github.com/Rr210/hexo-wx-api'
          break;
        case "2":
          data = 'https://creativecommons.org/licenses/by-nc-sa/4.0/'
      }
      // 设置剪切板的内容
      wx.setClipboardData({ data })
    },
    // 关键词切割
    getInf(str, key) {
      return str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%')
    },
    // input框输入内容
    search_key(e) {
      // console.log(e);
      let _this = this;
      let { value } = e.detail
      // 处理后的标题和内容
      let res_list = []
      if (value.trim().length !== 0) {
        // 进行遍历处理
        this.data.allData.filter(v => {
          let reg = new RegExp(`(${value.trim()})`, "gi")
          if (reg.test(JSON.stringify(v))) {
            // e表示开始匹配的索引号,先判断内容是否存在
            let c = v.content
            let t = v.title
            if (c) {
              let i = v.content.indexOf(value)
              let start = i - 30 < 0 ? 0 : i - 30
              let end = i + 50 > v.content.length ? v.content.length : i + 50
              let matchContent = v.content.substring(start, end)
              c = _this.getInf(matchContent, value.trim())
            }
            // 对标题进行切割
            if (t) {
              t = _this.getInf(t, value.trim())
            }
            // 执行关键词切割
            res_list.push(
              { "title": t, "content": c }
            )
            return v
          }
        })
        console.log(res_list);
        this.setData({
          res_list, key: value.trim()
        });
      } else {
        this.setData({
          res_list: [], key: value.trim()
        })
      }
    },
    // 获取json数据
    getJsonData() {
      wxRequest.getRequest(search_url)
        .then(res => {
          console.log(res);
          // wx.hideLoading();
          this.setData({
            allData: res.data
          })
        })
    },
  },
})

3. wxss代码

/*
 * @Description: 搜索组件
 * @Author: Harry
 * @Date: 2021-09-04 16:53:50
 * @Url: https://u.mr90.top
 * @github: https://github.com/rr210
 * @LastEditTime: 2021-09-10 18:19:05
 * @LastEditors: Harry
 */
.hr_search_w {
  width: 100%;
  height: 90rpx;
  background-color: #f8f1f1;
  padding: 20rpx;
  display: flex;
}
.hr_search_w .input_w {
  background-color: #fff;
  flex: 6;
  height: 100%;
  border-radius: 20rpx;
}
.hr_search_w .input_w .input_s_i {
  padding-left: 20rpx;
  color: #ccc;
  font-size: 27rpx;
  padding-top: 7rpx;
}
.hr_search_w .icon_w {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 页面遮罩层 */
.page_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(66, 66, 66, 0.6);
  z-index: 9998;
}
.content_w {
  position: absolute;
  top: calc(50% - 360rpx);
  left: calc(50% - 320rpx);
  border-radius: 20rpx;
  width: 640rpx;
  max-height: 720rpx;
  background-color: #fff;
  overflow: hidden;
  padding-bottom: 50rpx;
}
.show_search {
  animation: fadeIn 1s linear;
  opacity: 1;
  z-index: 9999;
}
.hide_search {
  animation: fadeOut 1s linear;
  opacity: 0;
  display: none;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  animation-name: fadeOut;
}
.search_hd {
  padding: 20rpx;
  margin: 20rpx;
}
.search_hd .searching {
  padding: 5rpx 0;
  padding-left: 20rpx;
  border: 2rpx solid #ccc;
  border-radius: 20rpx;
  font-size: 25rpx;
}
.search_res {
  width: 100%;
  padding: 20rpx;
  height: 540rpx;
}
.search_res .res_l_w {
  width: 100%;
  height: 100%;
}
.footer_w {
  position: absolute;
  bottom: 0rpx;
  margin-top: 20rpx;
  right: 8rpx;
  font-size: 24rpx;
  text-decoration: underline;
  color: #142b5c;
}
.hightLight {
  color: red;
}

4. 项目实现

【具体项目看这里】

公众号：今日在学

一起学习可好？扫码关注，了解更多!!