element-plus中Autocomplete自动补全输入框组件的使用

1.基本使用

①从官网赋值如下代码

②查看运行效果

③代码解读

2.调用后端接口，动态获取建议数据

结语

1.基本使用

①从官网赋值如下代码

<template>
<div><!-- 自动补全输入框 --><el-autocompletev-model="state":fetch-suggestions="querySearch":trigger-on-focus="false"clearablestyle="width:300px;"placeholder="请输入内容"@select="handleSelect"/></div>
</template><script setup>
import { onMounted, ref } from 'vue';//动态绑定自动补全输入框的值
const state = ref('');//存储建议列表的数据源，初始为空数组。
const restaurants = ref([]);//根据用户输入的内容（queryString）过滤建议列表。如果用户没有输入内容，则返回所有建议项。调用 cb(results) 将过滤后的结果传给 el-autocomplete 组件。
const querySearch = (queryString, cb) => {const results = queryString? restaurants.value.filter(createFilter(queryString)): restaurants.value;cb(results);
};//创建一个过滤器函数，用于匹配用户输入的内容。检查建议项的 value 是否以用户输入的内容开头（不区分大小写）。
const createFilter = (queryString) => {return (restaurant) => {return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;};
};//自定义函数loadAll，用来返回输入框自动补全时建议的数据
const loadAll = () => {//所有可能匹配的选项。（注意：每一个选项都是一个对象，构成这个对象数组）return [{ value: 'vue' },{ value: 'element' },{ value: 'cooking' },{ value: 'mint-ui' },{ value: 'vuex' },{ value: 'vue-router' },{ value: 'babel' },];
};//选中自动输入框的建议时，触发的事件
const handleSelect = (item) => {//item是我们选中的建议中的那个选项（是一个对象）alert(JSON.stringify(item));
};//element-plus组件加载完成后，调用 loadAll函数 初始化 restaurants 数据（我们可以在这个函数内，发送axios请求后端，获取数据，此时就不需要通过loadAll函数来获取数据了）
onMounted(() => {restaurants.value = loadAll();
});
</script><style scoped></style>