直播电商平台开发，uni-app 实现搜索关键词高亮效果

1.实现逻辑

使用腾讯地图sdk 关键词输入提示，过滤出符合条件的值

过滤出来的值要添加样式，达到想要的高亮效果。

需要正则匹配，模糊查询展示高亮。

正则表达式文档

new RegExp(pattern, attributes) JavaScript RegExp 对象

replace() 方法用于在字符串中用一些字符替换另一些字符

stringObject.replace(regexp/substr,replacement) replace() 方法

2. 封装搜索关键词方法

 // 搜索关键词<br>export function searchKeyword (keyword, city) {<br>  return new Promise((resove, reject) => {<br>    const qqmapsdk = new QQMapWX({<br>        key: 'VNBBZ-SKMRW-U5TR5-OIYQZ-VEOMF-IABLP',  //之前在腾讯位置服务申请的key<br>  })<br>    qqmapsdk.getSuggestion({<br>      keyword: keyword,  //搜索关键词<br>      region: city,  //城市名<br>      region_fix: 1, //固定在当前城市<br>      success: (res) => {<br>        resove(res)<br>      },<br>      fail: (e) => {<br>        reject(e)<br>      },<br>    })<br>  })<br>} 

3. 实现代码

<template><br>   <view><br>   <!-- 地址搜索 --><br>    <view><br>      <view @click="getCityList"><br>        <text class="city u-line-1">{{ city }}</text><br>        <u-icon name="arrow-down" color="#474A54" size="10"></u-icon><br>      </view><br>      <view><br>        <u-search<br>          placeholder="请输入地址"<br>          v-model="keyword"<br>          shape="square"<br>          :clearabled="true"<br>          height="65rpx"<br>          bgColor="#F5F6FA"<br>          borderColor="#ECECEC"<br>          :animation="true"<br>          :showAction="false"<br>          @change="getsuggestList"<br>        ></u-search><br>      </view><br>    </view><br>    <!-- 搜索地址结果 --><br>       <view v-if="filterList.length > 0"><br>        <scroll-view<br>          scroll-y<br>          scroll-with-animation<br>          :scroll-top="scrollTop"<br>          :style="{ height: `calc(100vh - 53px)` }"<br>        ><br>          <block v-for="(item, index) in filterList" :key="index"><br>            <view @click="selectFilterLocation(item)"><br>              <rich-text :nodes="item.titleStyle"></rich-text><br>              <view>{{ item.address }}</view><br>            </view><br>          </block><br>        </scroll-view><br>      </view><br>       <!-- 无搜索结果 --><br>      <view v-if="filterList.length === 0 && showEmpty"><br>        <u-empty<br>          mode="search"<br>          text="没发现这个地址，换个关键词试试吧~"<br>          marginTop="100"<br>        /><br>      </view><br>  </view><br></template><br><script><br>import { searchKeyword } from '@/utils/tool.js'<br>export default {<br>  data() {<br>    return {<br>      city:'青岛' <br>      keyword: '', //搜索关键词<br>      filterList: [], //搜索结果<br>      showEmpty: false, // 搜索空状态<br>    }<br>  },<br>  methods:{<br>  // 点击搜索的任意一条<br>   selectFilterLocation(e) {<br>      //做一些存储操作或者根据项目需求自己改<br>      uni.setStorageSync("xxx", e)<br>      this.filterList = []<br>      this.keyword = '' <br>   },<br>   // input输入框发生改变<br>    getsuggestList(keyword) {<br>      if (keyword === '') {<br>        this.filterList = []<br>        this.showEmpty = false<br>        return<br>      }<br>      //过滤符合条件的值<br>      searchKeyword(keyword, this.relocation.city)<br>        .then((res) => {<br>          console.log(res, '筛选数组');<br>          let sug = []<br>          res.data.forEach((item) => {<br>            sug.push({<br>              id: item.id,<br>              location: item.title,<br>              titleStyle: this.join(item.title, keyword),<br>              address: item.address,<br>              city: item.city,<br>              lat: item.location.lat,<br>              lng: item.location.lng,<br>            })<br>          })<br>          this.filterList = sug<br>          if (this.filterList.length === 0) {<br>            this.showEmpty = true<br>          } else {<br>            this.showEmpty = false<br>          }<br>        })<br>        .catch((err) => {<br>          console.log(err)<br>        })<br>    },<br>    // 拼接  关键词高亮<br>    join(str, key) {<br>      var reg = new RegExp(`(${key})`, 'gm')<br>      var replace = '<span style="color:#F3671A;font-weight:bold;">$1</span>'<br>      return str.replace(reg, replace)<br>    },<br></script><br><style scoped><br> .searchCon {<br>    display: flex;<br>    align-items: center;<br>    padding: 0 22upx;<br>    box-sizing: border-box;<br>    background: #fff;<br>    border-bottom: 1upx solid #eee;<br>    .cityCon {<br>      margin-right: 36upx;<br>      display: flex;<br>      align-items: baseline;<br>      .city {<br>        max-width: 155upx;<br>        font-size: 27upx;<br>        margin-right: 8upx;<br>      }<br>    }<br>    .searchInput {<br>      flex: 1;<br>      margin: 18upx auto;<br>    }<br>  }<br> .filterList {<br>    position: absolute;<br>    top: 106upx;<br>    bottom: 0;<br>    left: 0;<br>    right: 0;<br>    background: #fff;<br>    padding: 0 22upx;<br>    .item {<br>      padding: 22upx 0;<br>      border-bottom: 1upx solid #eee;<br>      .filterTitle {<br>        font-size: 30upx;<br>        color: #333;<br>      }<br>      .address {<br>        font-size: 26upx;<br>        color: #999;<br>      }<br>    }<br>  }<br></style>