El Autocomplete

Autocomplete Component

Autocomplete provides input suggestions based on user input.

When to Use

• Search suggestions
• Form autocomplete
• Address inputs
• Quick selection from options

Basic Usage

<template>
  <el-autocomplete
    v-model="state"
    :fetch-suggestions="querySearch"
    clearable
    placeholder="Please input"
    @select="handleSelect"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue'

const state = ref('')
const links = ref([])

const querySearch = (queryString, cb) => {
  const results = queryString
    ? links.value.filter(createFilter(queryString))
    : links.value
  cb(results)
}

const createFilter = (queryString) => {
  return (restaurant) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}

const handleSelect = (item) => {
  console.log(item)
}

onMounted(() => {
  links.value = [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'element', link: 'https://github.com/ElemeFE/element' },
    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' }
  ]
})
</script>

Custom Template

<template>
  <el-autocomplete
    v-model="state"
    :fetch-suggestions="querySearch"
    placeholder="Please input"
  >
    <template #default="{ item }">
      <div class="value">{{ item.value }}</div>
      <span class="link">{{ item.link }}</span>
    </template>
  </el-autocomplete>
</template>

Remote Search

<template>
  <el-autocomplete
    v-model="state"
    :fetch-suggestions="querySearchAsync"
    placeholder="Please input"
  />
</template>

<script setup>
import { ref } from 'vue'

const state = ref('')

const querySearchAsync = (queryString, cb) => {
  fetch(`/api/search?q=${queryString}`)
    .then(res => res.json())
    .then(data => cb(data))
}
</script>

API Reference

Attributes

Events

Slots

Best Practices

1. Use debounce to reduce API calls
2. Implement fetch-suggestions for async data
3. Use custom templates for rich suggestions