Vue 3 中使用 a-input 组件实现拼音模糊查询并自动填充名称

<template>
  <a-input v-model="inputValue" @input="handleInput" />
  <a-select v-model="inputValue" :options="options" @change="handleSelectChange" />
</template>
<script setup>
import { ref } from 'vue';
import { searchHazardFactor } from '@/api';

const inputValue = ref('');
const options = ref([]);

const handleInput = async (value) => {
  inputValue.value = value;
  options.value = await searchHazardFactor(value);
};

const handleSelectChange = (value) => {
  const selectedOption = options.value.find(option => option.code === value);
  inputValue.value = selectedOption ? selectedOption.name + ',' : '';
};
</script>