Autocomplete

Matches Arco AutoComplete, combining the filled input with Arco-style suggestions. See the Element Plus docs for props.

Suggestions

Focus the input to see suggestions, then type to filter city names.

<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>

Differences from Arco

• The Element Plus arrow remains by default; set show-arrow to false for an Arco-style panel.
• Arco highlights the first suggestion automatically; Element Plus highlights it after keyboard navigation.