做小程序的时候处理后端未进行高亮的情况（上）

提示：文章写完后，可以自动生成目录。生成方法请参考右侧帮助文档

文章目录

前言

提示：这里可以添加本文要记录的一般内容：

大多数网站都有搜索关键字的突出显示。当搜索结果后端没有添加需要高亮处理的标签时搜索请输入要搜索的关键词搜索请输入要搜索的关键词，前端需要对搜索结果进行处理。接下来分享一下制作小程序时后台不高亮的情况。

一、相关代码

这是搜索页面的输入框和搜索结果显示区

<template>
  <view class="u-demo">
    <view class="u-demo-wrap">
      <u-search
        ref="search"
        v-model="keyword"
        @change="inputChange"  //当输入框的搜索内容发生改变后，触发该
        @search="doSearch"
        @custom="cancelSearch"
        shape="round"
        :clearabled="clearabled"
        :show-action="showAction"
        action-text="取消"
        :input-align="inputAlign"
        :placeholder="searchContent"
        focus="true"
        @clear="clear"
      ></u-search>
    </view>
    <view class="search-keyword">
      <scroll-view
        class="keyword-list-box"
        v-show="isShowKeywordList"
        scroll-y
      >
        <block
          v-for="(row,index) in keywordList"
          :key="index"
        >
          <view
            class="keyword-entry"
            hover-class="keyword-entry-tap"
          >
            <view
              class="keyword-text"
              @tap.stop="doSearch(keywordList[index].keyword,keywordList[index])"
            >
              <rich-text :nodes="row.htmlStr"></rich-text>
            </view>
          </view>
        </block>
        <block v-if="keywordList.length==0">
          <view
            class="kw-entry"
            hover-class="kw-entry-tap"
          >
            <view class="kw-text">
              <view>暂无匹配结果</view>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>
</template>

通过@change="inputChange" 事件将输入关键字发送到后端，请求该关键字的相关数据

inputChange(event) {
      console.log('event:', event);  //输入框输入的关键字
      //兼容引入组件时传入参数情况
      const keyword = event.detail ? event.detail.value : event;
      if (!keyword) {
        this.cancelSearch();
        return;
      }
      this.isShowKeywordList = true;
      this.showAction = true;
      //以下示例截取淘宝的关键字，请替换成你的接口
      this.http
        .get(config.CONFIG.SERVER.getRoomList, {
          params: {
            pageNum: 1,
            pageSize: 10,
            renterName: keyword
          }
        })
        .then((resp) => {
          if (resp.data.code === 0) {
            console.log('resp:', resp); //后端返回的数据
            this.keywordList = [];
            this.searchResults = resp.data.data;
            //drawCorrelativeKeyword()是让返还的数据关键字高亮
            this.keywordList = this.drawCorrelativeKeyword(resp.data.data.list, keyword);
          } else {
            // fail(resp);
          }
        })
        .catch((err) => {
          // fail(err);
        });
    },

drawCorrelativeKeyword() 高亮后端返回的数据中的关键字

//高亮关键字
    drawCorrelativeKeyword(keywords, keyword) {
      const len = keywords.length;
      const keywordArr = [];
      for (let i = 0; i < len; i++) {
        let html = keywords[i].renterName.replace(keyword, "" + keyword + '');
        html = '
' + html + '-' + keywords[i].estateName + '-' + keywords[i].roomDesc + '
';
        const tmpObj = {
          roomId: keywords[i].roomId,
          estateName: keywords[i].estateName,
          roomDesc: keywords[i].roomDesc,
          leaseEndTime: keywords[i].leaseEndTime,
          certificateNumber: keywords[i].certificateNumber,
          phoneNumber: keywords[i].phoneNumber,
          renterName: keywords[i].renterName,
          renterType: keywords[i].renterType,
          htmlStr: html,
          keywordId: keywords[i].id
        };
        keywordArr.push(tmpObj);
      }
      return keywordArr;
    },

后端返回的数据

最终结果

终于

分享就到这里，如果对你有帮助或启发，请点赞或评论，谢谢！！！