搜索输入时候的高亮显示

image.png

image.png

 <van-cell
      v-for="(suggestion, index) in suggestions"
      :key="index"
      icon="location-o"
    >
      <div slot="title" v-html="hightlight(suggestion)"></div>
    </van-cell>

image.png

  methods: {
    hightlight(suggestion) {
      //regExp是正则表达式的构造函数
      //参数1：字符串
      //参数2：匹配模式
      //参数3：正则对象

      return suggestion.replace(
        new RegExp(this.searchText, "gi"),
        `<span style="color:red">${this.searchText}</span>`
      );
    }
  },
  watch: {
    //属性名：要监视的数据名称，这是简写
    // searchText() {
    //   console.log("hello");
    // }
    //这才是完整的写法
    searchText: {
      handler: debounce(async function() {
        const { data } = await getSearchSuggestion(this.searchText);
        // console.log(data);
        this.suggestions = data.data.options;
      }, 1000),
      // async handler() {
      //   // console.log("hello");
      //   //找到数据接口
      //   //请求获取数据
      //   //模板绑定展示
      //   const { data } = await getSearchSuggestion(this.searchText);
      //   // console.log(data);
      //   this.suggestions = data.data.options;
      // },
      immediate: true
    }