Vue里面搜索关键字高亮显示小记

一、效果图

二、HTML搜索结果展示框

    <!-- 顶部搜索筛选区域 -->
    <div class="search-wrap">
      <a-input-search
        v-model="searchKey"
        placeholder="请输入栏目名称"
        enter-button="搜索"
        @search="onSearch"
        class="search-input"
        @keyup="onSearch"
      />
      <div class="search-content" :class="{ 'd-block': isShowSearchContent }">
        <div
          class="search-content-item"
          v-for="(items, index) in searchResult"
          :key="index"
        >
          <template v-for="(val, inx) in items">
            <span :key="'name' + inx" v-html="val.name">{{ val.name }} </span>
            <a-icon
              :key="'sep' + inx"
              type="right"
              v-if="items.length > 1 && inx != items.length - 1"
              class="search-content-item-sep"
            />
          </template>
        </div>
      </div>
    </div>
    <!-- 顶部搜索筛选区域 -->

三、定义相关数据属性

  data() {
    return {      
      //搜索结果列表
      searchResult: [],
      //保存用户输入的搜索关键字
      searchKey: "",
      //是否显示搜索结果内容框
      isShowSearchContent: false,
    };
  },

四、触发搜索的逻辑

    //根据关键字搜索栏目
    onSearch() {
      if (this.searchKey) {
        //请求接口获取到搜索结果列表数据
        //this.searchResult
        
        //使用正则处理关键字高亮显示
        let reg = new RegExp(this.searchKey, "g");
        let resultList = this.searchResult.map((value) => {
          let list = [];
          value.forEach((item) => {
            let hText = item.name.replace(reg, (match) => {
              return `<font style="color:#1890ff">${match}</font>`;
            });
            list.push({
              id: item.id,
              name: hText,
            });
          });
          return list;
        });
        this.searchResult = resultList;
        this.isShowSearchContent = true;
      } else {
        this.isShowSearchContent = false;
      }
    },