目录
1.基本使用
①从官网赋值如下代码
html
<template>
<div>
<!-- 自动补全输入框 -->
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearch"
:trigger-on-focus="false"
clearable
style="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>②查看运行效果
③代码解读
2.调用后端接口，动态获取建议数据
编写后端接口，返回一个对象数组：
修改js代码：
展示效果：
结语
以上就是element-plus中Autocomplete自动补全输入框组件的使用。
喜欢本篇文章的话，可以留个免费的关注~~