搜索框 弹出数据及 实时搜索

课堂笔记

1、搜索框样式

<van-search v-model="value" show-action placeholder="请输入搜索关键词" >

2、弹出层数据获取

  <div class="pop1" v-if="show">
      <div v-for="(item,index) in searchList" :key="index" style="margin-top:10px">
        <div @click="$getid1(item.id)" style="margin-left:10px" v-html="item.name"></div>
      </div>
    </div>

3、数据定义

  data() {
    return {
      show: false, //控制搜索框
      searchList: [], //搜索数据
       value: "",
    };
  },

4、数据监听

 watch: {
    value(val) {
      //判断输入框是否有数据
      if (this.value === "") {
        this.show = false;    //控制弹出层的是否展示
      } else {
        this.show = true;      //控制弹出层的是否展示
        this.$api             //如果输入框有数据获取数据+
          .getSearchDate({
            value: this.value,
          })
          .then((res) => {
            this.searchList = res.data.list;//获取后台数据
            this.searchList.map((item) => { //设置关键字高亮
              item.name = item.name.replace(
                this.value,
                `<span style="color:red;">${this.value}</span>`
              );
            });
          .catch((err) => {
            window.console.log(err);
          });
      }
    },
  },