直播電商平臺開發，uni-app 實現搜尋關鍵詞高亮效果

直播電商平臺開發，uni-app 實現搜尋關鍵詞高亮效果

1.實現邏輯

使用騰訊地圖sdk 關鍵詞輸入提示，過濾出符合條件的值

過濾出來的值要新增樣式，達到想要的高亮效果。

 需要正則匹配，模糊查詢展示高亮。

正規表示式檔案

new RegExp(pattern, attributes) JavaScript RegExp 物件

replace() 方法用於在字串中用一些字元替換另一些字元

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

2. 封裝搜尋關鍵詞方法

 // 搜尋關鍵詞
export function searchKeyword (keyword, city) {
  return new Promise((resove, reject) => {
    const qqmapsdk = new QQMapWX({
        key: 'VNBBZ-SKMRW-U5TR5-OIYQZ-VEOMF-IABLP',  //之前在騰訊位置服務申請的key
  })
    qqmapsdk.getSuggestion({
      keyword: keyword,  //搜尋關鍵詞
      region: city,  //城市名
      region_fix: 1, //固定在當前城市
      success: (res) => {
        resove(res)
      },
      fail: (e) => {
        reject(e)
      },
    })
  })
}

3. 實現程式碼

<template>
   <view>
   <!-- 地址搜尋 -->
    <view>
      <view @click="getCityList">
        <text class="city u-line-1">{{ city }}</text>
        <u-icon name="arrow-down" color="#474A54" size="10"></u-icon>
      </view>
      <view>
        <u-search
          placeholder="請輸入地址"
          v-model="keyword"
          shape="square"
          :clearabled="true"
          height="65rpx"
          bgColor="#F5F6FA"
          borderColor="#ECECEC"
          :animation="true"
          :showAction="false"
          @change="getsuggestList"
        ></u-search>
      </view>
    </view>
    <!-- 搜尋地址結果 -->
       <view v-if="filterList.length > 0">
        <scroll-view
          scroll-y
          scroll-with-animation
          :scroll-top="scrollTop"
          :style="{ height: `calc(100vh - 53px)` }"
        >
          <block v-for="(item, index) in filterList" :key="index">
            <view @click="selectFilterLocation(item)">
              <rich-text :nodes="item.titleStyle"></rich-text>
              <view>{{ item.address }}</view>
            </view>
          </block>
        </scroll-view>
      </view>
       <!-- 無搜尋結果 -->
      <view v-if="filterList.length === 0 && showEmpty">
        <u-empty
          mode="search"
          text="沒發現這個地址，換個關鍵詞試試吧~"
          marginTop="100"
        />
      </view>
  </view>
</template>
<script>
import { searchKeyword } from '@/utils/tool.js'
export default {
  data() {
    return {
      city:'青島' 
      keyword: '', //搜尋關鍵詞
      filterList: [], //搜尋結果
      showEmpty: false, // 搜尋空狀態
    }
  },
  methods:{
  // 點選搜尋的任意一條
   selectFilterLocation(e) {
      //做一些儲存操作或者根據專案需求自己改
      uni.setStorageSync("xxx", e)
      this.filterList = []
      this.keyword = '' 
   },
   // input輸入框發生改變
    getsuggestList(keyword) {
      if (keyword === '') {
        this.filterList = []
        this.showEmpty = false
        return
      }
      //過濾符合條件的值
      searchKeyword(keyword, this.relocation.city)
        .then((res) => {
          console.log(res, '篩選陣列');
          let sug = []
          res.data.forEach((item) => {
            sug.push({
              id: item.id,
              location: item.title,
              titleStyle: this.join(item.title, keyword),
              address: item.address,
              city: item.city,
              lat: item.location.lat,
              lng: item.location.lng,
            })
          })
          this.filterList = sug
          if (this.filterList.length === 0) {
            this.showEmpty = true
          } else {
            this.showEmpty = false
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 拼接  關鍵詞高亮
    join(str, key) {
      var reg = new RegExp(`(${key})`, 'gm')
      var replace = '<span style="color:#F3671A;font-weight:bold;">$1</span>'
      return str.replace(reg, replace)
    },
</script>
<style scoped>
 .searchCon {
    display: flex;
    align-items: center;
    padding: 0 22upx;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1upx solid #eee;
    .cityCon {
      margin-right: 36upx;
      display: flex;
      align-items: baseline;
      .city {
        max-width: 155upx;
        font-size: 27upx;
        margin-right: 8upx;
      }
    }
    .searchInput {
      flex: 1;
      margin: 18upx auto;
    }
  }
 .filterList {
    position: absolute;
    top: 106upx;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 0 22upx;
    .item {
      padding: 22upx 0;
      border-bottom: 1upx solid #eee;
      .filterTitle {
        font-size: 30upx;
        color: #333;
      }
      .address {
        font-size: 26upx;
        color: #999;
      }
    }
  }
</style>

 以上就是直播電商平臺開發，uni-app 實現搜尋關鍵詞高亮效果， 更多內容歡迎關注之後的文章