Vue3 AntdV a-select实现自行输入与选择功能（setup语法糖写法）

在网上找了一些思路，大概心里有点数，但是大佬们的代码基本上都是vue2的写法，亦或者是vue3非setup语法糖写法，所以我就自己修改了一下，以此来记录自己的学习过程，文章末尾标注了实现方式的思路来源。在此声明以下思路非我原创！

有两种实现方式，第一种是当输入时会出现选项，如图

第二种则是直接输入内容，不会弹出选项卡，如图

两种实现方式的思路不同，第二种代码会更加简洁。

第一种思路的代码：

<template>
  <a-select
    v-model:value="currentValue"
    showSearch
    :options="options"
    @search="handleSearch"
    @focus="handleFocus"
    @select="handleSelect"
    style="width:200px"
  />
  <div>当前的值为：{{ currentValue }}</div>
</template>

<script setup>
import { ref, computed } from 'vue';
// import { Select, SelectOption } from 'ant-design-vue';

// 定义响应式变量
const currentValue = ref(undefined);

// 切换option列表状态 false：请求option列表 true: 动态option列表
const switchRef = ref(false);

// 动态option列表
const dynamicOptions = ref([]);

// 请求option列表
const requestOptions = ref([]);

// 计算属性 options
const options = computed(() => {
  if (switchRef.value) {
    return [...dynamicOptions.value];
  } else {
    return [...requestOptions.value];
  }
});

// 模拟请求后端接口返回options列表
const handleFocus = () => {
  requestOptions.value = [
    {
      label: '张三',
      value: '1',
    },
    {
      label: '李四',
      value: '2',
    },
    {
      label: '王五',
      value: '3',
    },
  ];
  // 用于重新弹出下拉列表时 展示请求option列表
  switchRef.value = false;
};

const handleSearch = (value) => {
  let arr = [...requestOptions.value];

  if (value) {
    let panArr = arr.filter((item) => item.label.includes(value));
    if (panArr.length <= 0) {
      switchRef.value = true;
      dynamicOptions.value = [
        {
          label: value,
          value: value,
        },
      ];
    } else {
      switchRef.value = false;
    }
  } else {
    switchRef.value = false;
    dynamicOptions.value = [];
  }
};

const handleSelect = (value) => {
  currentValue.value = value;
};
</script>

第二种思路的代码：

<template>
    <div>
      <a-select
        v-model:value="selected"
        show-search
        :notFoundContent="null"
        :filter-option="filterOption"
        style="width: 180px"
        placeholder="请选择或输入"
        @select="handleSelect"
      >
        <a-select-option
          v-for="(item, index) in list"
          :key="index"
          :value="item.id"
        >
          {{ item.value }}
        </a-select-option>
      </a-select>
      <h1>{{ selected }}</h1>
    </div>
  </template>
  
<script setup>
import { ref } from 'vue';

// 定义下拉列表
const list = [
    { id: '1', value: '香蕉' },
    { id: '2', value: '苹果' },
    { id: '3', value: '火龙果' },
];

// 定义选择器值
const selected = ref(undefined);
const handleSelect = (value) => {
    selected.value = value;
};

const filterOption = (input, option) => {
    /* 在此前是可以手动输入，但鼠标离开后，输入的内容不能在输入框内保存，
    将input的值给到a-select标签的v-model绑定的selected，即可实现将手动输入的值赋值给input */
    selected.value = input
    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
</script>

以上两段代码都是可以直接复制跑通的，环境正确的情况下不会有bug产生。

以上两种思路均是借鉴别人而得来的，再次声明并非原创思路。

第一种思路来源：Antd/Antdv Select组件实现可输入且单选，该网站的代码并非setup语法糖写法，我也是对照着大佬的代码修改而成的。

第二种思路来源：antd中的a-select组件既可手动输入又可下拉选择，大佬的代码是vue2的写法，我依旧是对照他的代码进行修改，写成vue3 setup语法糖的模式。

以上供各位看官参考。