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>

本文地址：https://blog.csdn.net/windmilljan/article/details/110663062