我们首先要先将标签写出来，其次写入一些属性，这个直接去官网粘贴即可！

 <el-autocomplete v-model="value" style="width: 300px;"
 :fetch-suggestions="querySearch"
 :trigger-on-focus="false" placeholder="请输入内容，我来帮你猜一下"
 trigger-on-focus></el-autocomplete>

我们可以看到，这个代码，需要写一个函数，也就是querySearch，所以我们在methods里面写入这个方法，这个方法要传入两个值，一个query（这个随便写），还有一个cb，这个不是随便写的，接下来看代码实现吧

export default {
    data() {
        return {
            coffees:[{
                value:'1星巴克咖啡'
            },{
                value:'2瑞星咖啡'
            },{
                value:'3库迪咖啡'
            }]
        }
    },
    methods: {
        querySearch(query, cb) {
            let results =  query ? this.coffees.filter(v=>v.value.includes(query)) : this.coffees
            console.log(results);
            cb(results);
        }
    }
}

这里面有两个注意的点，第一个就是data里面的coffees是一个对象数组，不是一个单纯的数组，第二个就是一定要有cb返回！我们这里海涌到了filter和includes，顺便也说一下吧

filter就是过滤器，他可以过滤出我们想要的东西

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const filteredNumbers = numbers.filter(num => num > 5);
console.log(filteredNumbers); // 输出 [6, 7, 8, 9, 10]

include就是包含，它可以判断数组中是否包含某个元素

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // 输出 true
console.log(fruits.includes('grape')); // 输出 false

这就是本期分享，谢谢大家观看