vue input框带搜索功能

Input输入框

    <template>
          名称:
          <el-autocomplete
            v-model="searchname"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入名称:"
            clearable    //可清除
          ></el-autocomplete>
     </template>
<script>
export default {
  name: "Input",
  mounted: function() {
    this.loadAll();
  },
  data() {
    return {
      //input远程搜索
      searchname: "",
      restaurants: [],
      timeout: null,
      uploading: false,
    };
  },
  methods: {
    //名称输入搜索
    loadAll() {
      this.$axios.get( url + "/Platform/getPlatform").then(res => {
        if (res.data.code == 200) {
          var data2 = [];
          res.data.data.map((value, index, arry) => {
            data2.push({
              id: value.id,
              value: value.platformName,          //重新修改后台返回来的Key名
            });
          });
          this.restaurants = data2;
        } else {
          this.$message.info("暂无数据");
        }
      });
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return state => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    }
  }
};
</script>

Select选择器

<el-form-item label="名称">
          <el-select
            v-model="addForm.platformId"
            filterable       //可输入搜索
            clearable      //可清除
            multiple         //多选
            placeholder="请选择名称"
            class="ptselect"
            @change="changehand()"
          >
            <el-option
              v-for="item in pingtailist"
              :key="item.id"
              :label="item.platformName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>