a-select 支持搜索 输入 单选

a-select 支持搜索和单选。在 vue3 中，可以使用 show-search 属性来启用搜索功能，并使用 filter-option 属性来自定义模糊匹配的方法。示例代码如下：

<template>
  <a-select show-search style="width: 200px" placeholder="输入搜索内容" :getPopupContainer="(triggerNode) => triggerNode.parentNode" :filter-option="filterOption">
    <a-select-option :value="0">DZM</a-select-option>
    <a-select-option :value="1">XYQ</a-select-option>
    <a-select-option :value="2">DJY</a-select-option>
  </a-select>
</template>

<script setup>
// 模糊匹配
function filterOption(input, option) {
  return `${option.key}`.toLowerCase().includes(`${input || ''}`.toLowerCase())
}
</script>

在 vue2 中，可以使用 showSearch 属性启用搜索功能，并使用 filterOption 属性来自定义匹配的方法。示例代码如下：

<template>
  <a-select showSearch style="width: 200px" placeholder="输入搜索内容" :filterOption="filterOption" :getPopupContainer="(triggerNode) => triggerNode.parentNode">
    <a-select-option :value="0">DZM</a-select-option>
    <a-select-option :value="1">XYQ</a-select-option>
    <a-select-option :value="2">DJY</a-select-option>
  </a-select>
</template>

<script>
export default {
  methods: {
    // 将输入的内容与显示的内容进行匹配
    filterOption(value, option) {
      return option.componentOptions.children[0].text.indexOf(value) >= 0
    }
  }
}
</script>