搜索结果关键字高亮显示

效果图:

image.png

html:

<template>
<!-- 搜索框 -->
  <div class="searchBox">
      <div class="inp"><input v-model="keyword" type="text" placeholder="关键词"></div>
      <img v-if="showCloseBtn" src="../../../../static/img/icons/shanchu.png" class="closeLogo" @click="cleanKeyword" alt="">
      <span @click="findEvent">搜索</span>
  </div>

<!-- 展示 -->
  <div class="clue-box" v-for="(item, index) in list" :key="index">
     <div class="clue-item">
        <div class="text-line-up">
          <div class="company-name"  v-html="item.companyName"></div>
          <div v-if="item.needCut" class="shenglv">...</div>
        </div>
        <div class="text-line-down">
          <div class="contractNo">合同编号：{{item.code}}</div>
          <div class="times">{{item.date}}</div>
        </div>
     </div>
  </div>
</template>

数据处理:

const para = {
    id: '20181123001', 
    keyword: '',
    pageNum: 1
}
wx.request({
    url: `xxx`,
    data: para,
    method: 'POST'
}).then( res => {
    console.log(res) // 每个项目返回的数据结构不一样. 自己找到要处理的数据
    // 假设 res.data.result 是我要处理的对象组
    if (res.data.result.length !== 0 && this.keyword) { // 带搜索才进行数据处理
        res.data.data.result.map((item, index) => {
            const re = new RegExp(this.keyword)
            let newString = ''
            let newname = ''
            // 适配
            if (re.test(item.companyName)) {
              newString = `<span style="color: #FF8C00">${this.keyword}</span>`
              newname = item.companyName.replace(this.keyword, newString)
              item.companyName = newname
            }
        })
    }
})

e.g. keyword 为A, 如果后台返回的数据包括带有a的话. 再增加一个正则 const re = new RegExp(this.keyword, 'i')

因为渲染的是v-html. 富文本. 所有css上设置的超过的部分为省略号的功能是实现不了的. 如果需要. 根据显示数据的长度进行判断,是否需要添加省略号... 给每条数据添加一个参数, 用于判断. 同时给放v-html的div设置一个最大宽度. 这个宽度 用em, 可以尽量避免字体只显示一半的尴尬...可如果显示的结果是中英文结合的话, 偶尔还是会有出现的....(如果有更好的处理办法, 请告诉我!!)
参考代码: <div v-if="item.needCut" class="shenglv">...</div>