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

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

本文基于vue和ant design

直接上代码

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

html：
                     <a-select
                        v-model="newSoftName"
                       show-search
                       option-filter-prop="children"
                       style="width: 230px"
                       :filter-option="filterOption"
                       @blur="handleBlur"
                       @change="newHandleChange"
                     >
                       <a-select-option v-for="(item, index) in newSoftNameList" :key="index" :value="item">
                         {
    
    { item }}
                       </a-select-option>
                     </a-select>
js:

    newHandleChange(value) {
      // console.log(`selected ${value}`);
      axios({
         url: '',
         method: '',
         params: 
      }).then(res => {
            // 业务逻辑
      }).catch(err => {
         console.log(err)
      })
    },
    handleBlur() {
      // this.isSelected = false
      // this.getdictionarySoftType()
    },
    filterOption(input, option) {
// 重要的一步，可以console.log(input)看下输入的是啥
      this.newSoftName = input // 在此前是可以手动输入，但鼠标离开后，输入的内容不能在输入框内保存，将input的值给到a-select标签的v-model绑定的newSoftName即可实现将手动输入的值赋值给input
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },

总结：

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

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