antd的a-select组件既可手动输入又可下拉选择

最近有一个需求：让下拉框既可下拉选择也可手动输入，在antd官网看了下，并没有看出啥名堂（实践证明还是缺乏前端经验，特记录下，希望对有此需求的小伙伴们提供帮助，如有问题，希望指导，以免误导他人）

本文基于vue和ant design

直接上代码

下拉框是组件库自带的，主要是手动输入。亲测有效，除了业务逻辑外，其他可以直接复制即可

1.  
   html：
2.  
   <a-select
3.  
   v-model="newSoftName"
4.  
   show-search
5.  
   option-filter-prop="children"
6.  
   style="width: 230px"
7.  
   :filter-option="filterOption"
8.  
   @blur="handleBlur"
9.  
   @change="newHandleChange"
10.  
    >
11.  
    <a-select-option v-for="(item, index) in newSoftNameList" :key="index" :value="item">
12.  
    {{ item }}
13.  
    </a-select-option>
14.  
    </a-select>
15.  
    js:
16.  
     
17.  
    newHandleChange(value) {
18.  
    // console.log(`selected ${value}`);
19.  
    axios({
20.  
    url: '',
21.  
    method: '',
22.  
    params:
23.  
    }).then(res => {
24.  
    // 业务逻辑
25.  
    }).catch(err => {
26.  
    console.log(err)
27.  
    })
28.  
    },
29.  
    handleBlur() {
30.  
    // this.isSelected = false
31.  
    // this.getdictionarySoftType()
32.  
    },
33.  
    filterOption(input, option) {
34.  
    // 重要的一步，可以console.log(input)看下输入的是啥
35.  
    this.newSoftName = input // 在此前是可以手动输入，但鼠标离开后，输入的内容不能在输入框内保存，将input的值给到a-select标签的v-model绑定的newSoftName即可实现将手动输入的值赋值给input
36.  
    return (
37.  
    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
38.  
    );
39.  
    },

总结：

解决办法还是自己根据文档摸索出来的，其实就很简单，但在网上找了一会，也没找到解决办法，实现这个需求无非就是将input这个值赋值给v-model绑定的值就可以了，除此之外，业务逻辑根据公司需求去实现就行了。

还是对组件库的理解不深，才导致一个简单的问题却花了很多时间解决。