文档解析
文档：Autocomplete 组件提供输入建议 （什么是建议？其实就是返回经过处理的数组）
文档：fetch-suggestions 属性是返回建议输入的方法。 在此示例中， querySearch(queryString, cb) 方法通过 cb(data) 给 Autocomplete 组件返回建议。（大白话翻译：就是通过querySearch方法，传入input框输入的值queryString，在querySearch方法里面拿到要返回的数组，经过业务处理，把希望展示在下拉框的数组通过cb方法给返回到下拉列表中展示出来）
注意事项
- 不同于普通下拉框（有label和value，一般label作为展示，value作为后端传值），autocomplete的下拉框只能显示value，
- 所以autocomplete的value值要用作于显示。素以就等于普通的下拉框的label
- 如果你想通过value拿到对应的code，就需要在使用的时候，通过数组find拿到value对应的code
举个例子（可直接点击看例子）
<template>
<div>
<el-autocomplete v-model="state.query" :fetch-suggestions="querySearch" placeholder="请输入内容"
@select="handleSelect"></el-autocomplete>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
name: 'App',
setup() {
const state = ref({
query: '',
suggestions: [],
});
//注意：这里是获取下拉框数据的地方，同时也可以处理下拉列表的数据（比如）
const querySearch = (queryString, cb) => {
const results = state.value.suggestions.filter((item) => {
return item.value.toLowerCase().includes(queryString.toLowerCase());
});
resultsArr.value = results
console.log(results, 'rrrr') //此处的results就是过滤出来符合条件的下拉框的数组
// 比如说，输入框输入java,则此处的results是[
// {
// "value": "JavaScript",
// "code": "jjj"
// },
// {
// "value": "Java",
// "code": "jajaja"
// }
// ]
cb(results);
};
//这个是选择value之后
const handleSelect = (item) => {
console.log('Selected:', item);
// 比如说选择了JavaScript, 则item为
// {
// "value": "JavaScript",
// "code": "jjj"
// }
console.log(state.value.query, 'query')
// 此处的state.value.query就是输入框输入的内容value, 也就是：JavaScript
};
// 模拟数据
state.value.suggestions = [
{ value: 'JavaScript', code: 'jjj' },
{ value: 'Java', code: "jajaja" },
{ value: 'Python', code: 'pppp' },
];
return {
state,
querySearch,
handleSelect,
};
},
};
</script>
