Element-ui输入框自动查询实现

<template>
  <el-autocomplete
          v-model="input"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          :trigger-on-focus="false"
          prefix-icon="el-icon-search"
          @select="handleSelect"
  ></el-autocomplete>
</template>

<script>
  const api = 'https://www.xxx.com/api';
  
  export default {
    name: 'ComponentName',
    data() {
      return {
        input: '',
      };
    },
    methods: {
      querySearch(queryString, cb) {
        axios({
          method: 'get',
          url: api,
        })
                .then((response) => {
                  let restaurants = response.data.data;
                  let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                  cb(results);
                })
                .catch((error) => {
                  console.log(error);
                });
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      }
    },
  }
</script>