小程序、uni-app 搜索内容高亮

673 阅读1分钟

搜索结果展示高亮效果

效果图展示

未高亮效果

未高亮效果

高亮效果

高亮效果

实现逻辑

  • 展示数据
  • map + includes 过滤出符合条件的值
  • 过滤出来的值加样式,处理高亮
  • 需要正则匹配 模糊查询展示高亮
  • 正则表达式文档 new RegExp(pattern, attributes) JavaScript RegExp 对象
  • replace() 方法用于在字符串中用一些字符替换另一些字符 stringObject.replace(regexp/substr,replacement) replace() 方法

主要源码

html 代码

<template>
  <view>
    <!-- 展示搜索结果 -->
    <view class="contacts-box uni-flex-center" v-for="(item, index) in contactsList" :key="index" @click="contactsClick(item)">
      <view class="name">
        <!-- 包含高亮的字段 -->
        <rich-text :nodes="item.name"></rich-text>
      </view>
    </view>
  </view>
</template>

js 代码

<script>
// 引入接口
let app = require('@/common/common.js')
export default {
  data() {
    return {
      // 搜索数据
      searchVal: '',
      // 展示数据
      contactsList: []
    }
  },
  methods: {
    // 搜索
    confirm() {
      let that = this
      app.search({}, (res) => {
        if (res.code == 0) {
          // 过滤出符合条件的值高亮
          res.data.map((item, index) => {
            if (item.name.includes(that.searchVal)) {
              item.name = that.join(item.name, that.searchVal)
            }
          })
          that.contactsList = res.data
        } else {
          app.showToast(res.message)
        }
      })
    },

    // 拼接
    join(str, key) {
      var reg = new RegExp(`(${key})`, 'gm')
      var replace = '<span style="color:#694BE1">$1</span>'
      return str.replace(reg, replace)
    }
  }
}
</script>

js重点--处理高亮

字段高亮处理		item.name = this.join(item.name,this.searchVal)
处理的函数		this.join();