搜索功能实现 – 搜索建议组件的封装 – 防抖 – 关键词高亮

<template>
  <div>
    <!-- 显示搜索建议 -->
    <!-- click事件回触发search事件（自定义）item 是当前的关键词 -->
    <van-cell
      @click="$emit('search', item)"
      v-for="(item, index) in List"
      :key="index"
      icon="search"
    >
      <!-- 关键词高亮-正则和replace替换 title的插槽 -->
      <template #title> <span v-html="hightLight(item)"></span> </template>
    </van-cell>
  </div>
</template>

<script>
import { suggestionApi } from "@/api/Search";
import { debounce } from "lodash";
export default {
  data() {
    return {
      List: [], // 搜索建议的数据存放
      timer: -1,
      //   str: '<span style="color: red">w</span>',
    };
  },
  // 父组件传 1 个值 关键词
  // 子组件 的 emit自定义的search事件会委托父组件改变 keywords 的值 然后更新 props 的keywords 然会触发 watch 的 handler 函数 然后请求建议数据
  props: {
    // 传入关键词
    keywords: {
      type: String,
      required: true,
    },
  },
  // 监视keywords变量
  watch: {
    keywords: {
      immediate: true,
      // yarn add lodash 下载lodash包
      // import { debounce } from "lodash"; 引入防抖的函数
      // 每隔700ms执行一次handler函数（在keywords变化的情况下，频繁触发的事件）
      handler: debounce(function (val) {
        // 调用建议的接口
        // console.log("trigger keywords");
        this.getSuggestion();
      }, 700),
      //   asd
      //   handler() {
      //     // 每次使用定时器之前注意先清除
      //     if (this.timer) clearTimeout(this.timer);
      //     this.timer = setTimeout(() => {
      //       this.getSuggestion();
      //     }, 500);
      //   },
    },
  },
  created() {
    console.log("trigger created");
  },
  methods: {
    async getSuggestion() {
      const { data } = await suggestionApi({
        q: this.keywords,
      });
      // 处理接口返回异常的数据 eg ：返回了null 要过滤
      this.List = data.data.options.filter((item) => item !== null);
    },
    hightLight(str) {
      if (typeof str !== "string") alert("不是string");
      // 搜索高亮
      const reg = new RegExp(this.keywords, "gi");
      console.log("正则匹配", reg);
      //   console.log(reg);
      const newStr = str.replace(
        reg,
        `<span style="color: red">${this.keywords}</span>`
      );
      console.log("newStr", newStr);
      return newStr;
    },
  },
};
</script>

<style>
</style>