Antd Select实现即可搜索又可输入_antd select,随意输入的内容

Antd Select如何实现即可搜索又可输入的操作

1、进入Select组件随便找一个合适的组件 (不一定如图)

2、代码删除后简洁如下 change focus等事件根据需求添加

<a-select
    v-model:value="name"
    show-search
    placeholder="Select a person"
    style="width: 200px"
    :options="options"
    //添加search事件
    @search="fetchName"
  >
  </a-select>
1
2
3
4
5
6
7
8
9
10

3、方法中使用

	options = [
        { value: 'jack', label: 'Jack' },
        { value: 'lucy', label: 'Lucy' },
        { value: 'tom', label: 'Tom' }
      ]

	    // 查询商品全称
    const fetchName= (value) => {
    //这一步是核心 
    //判断value是否存在 如果存在就把赋值给name, 这样select失去焦点后 不会清空输入信息
      if (value) {
        state.name = value
      }
		
	  //下面根据业务需求放查询请求
      ....
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这样就实现了即可搜索又可输入的操作