Vue 实现检索关键字高亮

电玩女神 2022-11-07 13:19 284阅读 0赞

需求：检索列表，匹配搜索关键字部分高亮

首先判断返回字符中是否包括该关键字，如果包括则进行样式修改。

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70][]

简略代码：

<template>
        //搜索框
        <div>
            <el-col :span="7">
                <input
                 class="searchDate"
                 v-model="searchcontent"
                 placeholder="请输入内容"
                 @keyup.enter="getDataList"></input>
            </el-col>
            <el-col :span="1" :pull="2" @click.native="getDataList($event)">
                <img style="margin-top: 10px;cursor: pointer;" src="../../../public/img/main/mryt_fdj.png" alt="" >
            </el-col>
        </div>
        //循环加载的列表
        <div v-for="(item,index) in dataList" :key="item.id">
            <span v-html="item.title"></span>
        </div>
    </template>
    <script>
      import {fetchNotice} from '@/api/policy/home'
      export default {
        data() {
          return {
            searchcontent:'',//搜索内容
            dataList: [] ,//信息列表
          }
        },
        created() {
          this.getDataList();
        },
        methods: {
          getDataList(e) {
            fetchNotice(Object.assign({
              searchContent : this.searchcontent,
            })).then(response => {
              this.dataList = response.data.data.records
              this.totalPage = response.data.data.total
              //如果有搜索关键字 进行高亮筛选
              if(this.searchcontent != '') {
                for(let i in this.dataList) {
                 //高亮替换
                 this.dataList[i].title = this.showData(this.dataList[i].title)
                }
              }
            })
          },
          // 筛选变色 如果搜索结果记录包含关键字，那么修改样式
          showData(val) {
           if (this.checkParam(val,this.searchcontent)) {
            //以 关键词 去分隔字符串 形成一个数组
            let arrry = val.split(this.searchcontent)
    
            //把数组元素用固定分隔符（此处为已添加高亮的关键词）拼接为一个完整字符串
            val = arrry.join('<font color="#ff0000">' + this.searchcontent + '</font>');
            return val
           } else {
            return val //不做任何修改
           }
          },
          //判断搜索记录是否包含某个关键字
          checkParam(val,param){
            if (val.indexOf(param) !== -1 && param !== ''){
             return true;
            }else {
             return false
            }
          },
        }
      }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]: /images/20221023/93a579fa922a4188bece253fde4f856c.png