Autocomplete

Autocomplete input

Markup Schema Example

Common Cities:

Markup Schema Remote Search Example

Remote Search:

Template Scoped Slot Example

<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { Autocomplete, FormItem, Submit } from '@silver-formily/element-plus'
import { Field, FormProvider } from '@silver-formily/vue'

const form = createForm()

const libraryOptions = [
  { value: 'Vue.js', description: 'A lightweight MVVM framework that is easy to get started with' },
  { value: 'React', description: 'A declarative UI library created by Meta' },
  { value: 'Svelte', description: 'A compile-time framework with a small runtime footprint' },
  { value: 'SolidJS', description: 'A fine-grained reactive system' },
  { value: 'Angular', description: 'A comprehensive all-in-one framework' },
]

async function log(value: any) {
  console.log(value)
}
</script>

<template>
  <FormProvider :form="form">
    <Field
      name="library"
      title="Framework Selection"
      :decorator="[FormItem]"
      :component="[
        Autocomplete,
        {
          triggerOnFocus: true,
          placeholder: 'Choose your favorite framework',
          style: { width: '320px' },
        },
      ]"
      :data-source="libraryOptions"
    >
      <template #default="{ item, field }">
        <div class="demo-autocomplete-item">
          <div class="demo-autocomplete-item__meta">
            <strong>{{ item.value }}</strong>
            <span>{{ item.description }}</span>
          </div>
          <span class="demo-autocomplete-item__hint">
            Current value: {{ field?.value?.value ?? 'Not selected' }}
          </span>
        </div>
      </template>
    </Field>
    <Submit style="margin-top: 12px" @submit="log">
      Submit
    </Submit>
  </FormProvider>
</template>

<style scoped>
.demo-autocomplete-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
}

.demo-autocomplete-item__meta {
  display: flex;
  flex-direction: column;
}

.demo-autocomplete-item__meta strong {
  font-weight: 600;
}

.demo-autocomplete-item__meta span {
  font-size: 12px;
  color: var(--vp-c-text-2);
}

.demo-autocomplete-item__hint {
  font-size: 12px;
  color: var(--vp-c-text-3);
}
</style>

Framework Selection:

Template Slot Example

<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { Autocomplete, FormItem, Submit } from '@silver-formily/element-plus'
import { Field, FormProvider } from '@silver-formily/vue'
import { ref } from 'vue'

const form = createForm()
const loading = ref(false)

const libraries = [
  { value: 'Vue.js', description: 'A lightweight, progressive MVVM framework' },
  { value: 'React', description: 'A declarative UI library created by Meta' },
  { value: 'Svelte', description: 'A compile-time framework with a smaller runtime footprint' },
  { value: 'SolidJS', description: 'A fine-grained reactive system' },
  { value: 'Angular', description: 'An all-in-one framework with a complete solution' },
]

function fetchLibraries(query: string, cb: (data: typeof libraries) => void) {
  loading.value = true
  const keyword = query?.toLowerCase() ?? ''
  setTimeout(() => {
    const results = keyword
      ? libraries.filter(item => item.value.toLowerCase().includes(keyword))
      : libraries
    cb(results)
    loading.value = false
  }, 500)
}

async function log(value: any) {
  console.log(value)
}
</script>

<template>
  <FormProvider :form="form">
    <Field
      name="library"
      title="Recommended Frameworks"
      :decorator="[FormItem]"
      :component="[
        Autocomplete,
        {
          triggerOnFocus: true,
          fetchSuggestions: fetchLibraries,
          placeholder: 'Search or choose a framework',
          style: { width: '320px' },
        },
      ]"
    >
      <template #prefix>
        <span class="demo-autocomplete-chip">Framework</span>
      </template>
      <template #suffix>
        <span class="demo-autocomplete-shortcut">⌘ K</span>
      </template>
      <template #header="{ field }">
        <div class="demo-autocomplete-header">
          Most recent selection: {{ field?.value ?? 'None yet' }}
        </div>
      </template>
      <template #default="{ item }">
        <div class="demo-autocomplete-item">
          <strong>{{ item.value }}</strong>
          <span>{{ item.description }}</span>
        </div>
      </template>
      <template #loading>
        <div class="demo-autocomplete-loading">
          Loading suggestions...
        </div>
      </template>
      <template #footer>
        <div class="demo-autocomplete-footer">
          Can't find the framework you want?
          <a href="https://github.com/vuejs" target="_blank" rel="noreferrer">Share feedback</a>
        </div>
      </template>
    </Field>
    <Submit style="margin-top: 16px" @submit="log">
      Submit
    </Submit>
  </FormProvider>
</template>

<style scoped>
.demo-autocomplete-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  font-size: 12px;
  background-color: var(--vp-c-bg-soft);
  border-radius: 4px;
  color: var(--vp-c-text-1);
}

.demo-autocomplete-shortcut {
  font-size: 12px;
  color: var(--vp-c-text-3);
}

.demo-autocomplete-header,
.demo-autocomplete-footer {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--vp-c-text-2);
}

.demo-autocomplete-item {
  display: flex;
  flex-direction: column;
  padding: 6px 12px;
  line-height: 1.4;
}

.demo-autocomplete-item strong {
  font-size: 13px;
  color: var(--vp-c-text-1);
}

.demo-autocomplete-item span {
  font-size: 12px;
  color: var(--vp-c-text-3);
}

.demo-autocomplete-loading {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--vp-c-text-2);
}
</style>

Recommended Frameworks:

Get Instance

Used to access the ElAutocomplete instance so you can call methods such as focus and blur. The type stays aligned with Element Plus.

const autocompleteRef = fieldRef.value?.invoke('getElAutocompleteRef')

API

See https://element-plus.org/en-US/component/autocomplete.html

Extended Props

Prop	Type	Description	Default
`options`	`array`	Option config array, equivalent to `dataSource`. When `fetchSuggestions` is not explicitly provided, it is converted into suggestions.	`[]`

When fetchSuggestions is not provided, the component automatically performs local fuzzy filtering based on dataSource / options.
When you customize fetchSuggestions(query, cb, field), the third field argument exposes the current Formily field instance. You can manually assign field.loading to reflect loading state, though this is usually only needed when you want semantic loading feedback or need to access values from other fields through field.

For example:

function remoteFetch(query: string, cb: (data: Option[]) => void, field?: Field) {
  field && (field.loading = true)
  apiRequest(query).finally((resp) => {
    cb(resp.data)
    field && (field.loading = false)
  })
}

Slots

The component inherits every slot from Element Plus ElAutocomplete. The default, header, and footer slots additionally inject the Formily field reference so suggestion items can access form state.

Slot	Description	Type
`default`	Custom suggestion item content	`object`
`header`	Content at the top of the dropdown list	`object`
`footer`	Content at the bottom of the dropdown list	`object`
`loading`	Custom loading content	--
`prefix`	Content before the input	--
`suffix`	Content after the input	--
`prepend`	Prepended content, displayed before `prefix`	--
`append`	Appended content, displayed after `suffix`	--

Autocomplete ​

Markup Schema Example ​

Markup Schema Remote Search Example ​

Template Scoped Slot Example ​

Template Slot Example ​

Get Instance ​

API ​

Extended Props ​

Slots ​