自动补全 Autocomplete

对应 Arco AutoComplete：输入框沿用 Input，下拉选项使用 Arco 风格。 属性用法见 Element Plus 文档。

候选建议

点击输入框展开候选项，输入内容过滤英文城市名。

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
const cities = ['London', 'Paris', 'Tokyo', 'Shanghai']
// Filter suggestions by the input; the callback must be called on every query.
function query(text: string, callback: (items: { value: string }[]) => void) {
  callback(cities.filter((city) => city.toLowerCase().includes(text.toLowerCase())).map((value) => ({ value })))
}
</script>

<template>
  <el-autocomplete v-model="value" :fetch-suggestions="query" :show-arrow="false" placeholder="Search cities" style="width: 240px" />
</template>

与 Arco 的差异

• 默认保留 Element Plus 弹层箭头，传 :show-arrow="false" 更接近 Arco。
• Arco 自动高亮第一项，Element Plus 需要键盘移动。