解决<a-auto-complete>输入首个汉字时输入法自动退出的问题

在使用<a-auto-complete>输入首个汉字时，输入法总是自动退出，剩下一个英文字母在输入框，代码如下：

<a-auto-complete
  v-model:value="formState.name"
  :allowClear="true"
  @clear="clearContent"
  :options="searchData"
  option-label-prop="label"
  style="width: 200px"
  placeholder="输入关键字"
  :filter-option="filterOption"
  @select="selectSearchOption"
>
</a-auto-complete>

const filterOption = (input, option) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

解决方法：使用 compositionstart 和 compositionend 事件

compositionstart 和compositionend事件是标准的浏览器事件，在 Vue 中可以直接使用它来监听输入法的输入开始和结束事件。

在输入法输入中文时，会先触发 compositionstart 事件，输入完成后触发 compositionend 事件。可以借助监听这两个事件来控制过滤逻辑，避免在输入法输入过程中进行不必要的过滤和搜索。

const isComposing = ref(false);

const onCompositionStart = () => {
  isComposing.value = true;
};

const onCompositionEnd = () => {
  isComposing.value = false;
};

filterOption方法改造为：

const filterOption = (input, option) => {
  if (isComposing.value) {
    return true; // 输入法正在输入，不过滤
  }
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

<a-auto-complete>增加两个函数调用，改造为：

<a-auto-complete
  v-model:value="formState.name"
  :allowClear="true"
  @clear="clearContent"
  :options="searchData"
  option-label-prop="label"
  style="width: 200px"
  placeholder="输入关键字"
  :filter-option="filterOption"
  @select="selectSearchOption"
  @compositionstart="onCompositionStart"
  @compositionend="onCompositionEnd"
>
</a-auto-complete>

即可。