如何使用ant design vue的a-select下拉框，实现既能输入内容，也可以下拉选择的效果

接到需求的 第一反应是使用a-select，加个search效果当输入框，但是写出来发现有问题，收集不到键入的值，于是研究了一下

问题描述：

a-select的@search事件，当失去焦点时，input值会清空，值无法绑定给v-model,效果如图:

解决方案： 1.（旧版本）

antdv 旧版本的change事件可以拿到input修改的value值，直接给v-model绑定上就行。

注：后面不知道在哪个版本里更新了， change事件里只能拿到event事件元素本身，拿不到input值。

2.（修改mode 强烈推荐）

如果无法结合@search @change事件解决你的问题的话，看看下面这种方案：

只需要改一下mode属性，@search就可以拿到最新的input值。

mode="SECRET_COMBOBOX_MODE_DO_NOT_USE"

我这里antdv采用的是4.x的版本，这个属性目前官方文档里是没有的，但确实好用！！亲测！

有兴趣的同学可以翻一下源码是有这个属性的：

最后 实现了想要的效果！

贴上demo代码：

<template>
	请选择：
	<a-select v-model:value="keyValue"
            allowClear
            mode="SECRET_COMBOBOX_MODE_DO_NOT_USE"
            show-search 
            style="width: 20%"
            :options="options" @change="handerChange">
	</a-select>
            <br />绑定最新值:{{ keyValue }}
</template>

<script setup>
import { ref } from 'vue';
const options = ref([]);
const keyValue = ref('');
for (let i = 10; i < 36; i++) {
	const value = i.toString(36) + i;
	options.value.push({
		label: value,
		value,
	});
}
const handerChange = (value) => {
}
</script>