Autocomplete
The autocomplete component is an implementation of the Input component that automatically lists results matching what the user writes.
API
Props
| Name | Type | Description |
|---|---|---|
| items | Array | Array of possible values for the autocomplete, that will appear as suggestions while the user types |
| get-items | Function | Function that will be called whenever the Autocomplete needs to fetch (search) results to show |
| lazy | Boolean | Defines if the autocomplete should paginate and lazy load chunks of items instead of always showing all the available items at once |
| limit | Number | Defines the amount of item suggestions that the autocomplete will lazy loads at a time |
| ...Input | ... | All the props from the Input component are also available and applied to the Input instance. |
Local Autocomplete
The local autocomplete suggests values to the user based on a preset list. Try searching for the name of a country.
<template>
<Autocomplete v-model="value" :items="items" />
</template>
<script>
export default {
data() {
return {
value: '',
items: [
{ key: 'PT', name: 'Portugal' },
{ ... }
]
}
},
}
</script>
Remote Autocomplete
The remote autocomplete shows suggestions returned from the get-items callback function, passed in as a prop. The get-items function will receive the value that the user is searching for as the first argument and an options object as the second argument, containing the pagination page and amount of items to return.
*The autocomplete will show whatever values the get-items function returns.
<template>
<Autocomplete v-model="value" :get-items="getItems" />
</template>
<script>
export default {
data() {
return {
value: '',
}
},
methods: {
getItems(value, options) {
if (!value) return []
// Simulate HTTP request to retrieve
// the autocomplete suggestions
return new Promise(resolve => {
let response = [
{ key: 1, name: 'Result 1' },
{ key: 2, name: 'Result 2' },
{ key: 3, name: 'Result 3' },
{ key: 4, name: 'Result 4' },
{ key: 5, name: 'Result 5' },
{ key: 6, name: 'Result 6' },
{ key: 7, name: 'Result 7' },
{ key: 8, name: 'Result 8' },
{ key: 9, name: 'Result 9' },
{ key: 10, name: 'Result 10' },
{ key: 11, name: 'Result 11' },
{ key: 12, name: 'Result 12' },
{ key: 13, name: 'Result 13' },
{ key: 14, name: 'Result 14' },
{ key: 15, name: 'Result 15' },
{ key: 16, name: 'Result 16' },
{ key: 17, name: 'Result 17' },
{ key: 18, name: 'Result 18' },
{ key: 19, name: 'Result 19' },
{ key: 20, name: 'Result 20' },
{ key: 21, name: 'Result 21' },
]
resolve(response)
})
},
},
}
</script>
Lazy
A remote autocomplete can be defined as lazy through the lazy prop. When the autocomplete is defined as lazy whenever the user scrolls to the end of the suggestions list the autocomplete will try to load more results by repeating the call to the get-items function.
<template>
<Autocomplete v-model="value" :get-items="getItems" lazy />
</template>
<script>
export default {
data() {
return {
value: '',
}
},
methods: {
getItems(value, options) {
if (!value) return []
// Simulate HTTP request to retrieve
// the autocomplete suggestions
return new Promise(resolve => {
let response = [
{ key: 1, name: 'Result 1' },
{ key: 2, name: 'Result 2' },
{ key: 3, name: 'Result 3' },
{ key: 4, name: 'Result 4' },
{ key: 5, name: 'Result 5' },
{ key: 6, name: 'Result 6' },
{ key: 7, name: 'Result 7' },
{ key: 8, name: 'Result 8' },
{ key: 9, name: 'Result 9' },
{ key: 10, name: 'Result 10' },
{ key: 11, name: 'Result 11' },
{ key: 12, name: 'Result 12' },
{ key: 13, name: 'Result 13' },
{ key: 14, name: 'Result 14' },
{ key: 15, name: 'Result 15' },
{ key: 16, name: 'Result 16' },
{ key: 17, name: 'Result 17' },
{ key: 18, name: 'Result 18' },
{ key: 19, name: 'Result 19' },
{ key: 20, name: 'Result 20' },
{ key: 21, name: 'Result 21' },
]
resolve(response)
})
},
},
}
</script>
Placeholder
<template>
<Autocomplete v-model="value" :items="items" placeholder="Country..." />
</template>
<script>
export default {
data() {
return {
value: '',
items: [
{ key: 'PT', name: 'Portugal' },
{ ... }
]
}
},
}
</script>
Labels
<template>
<Autocomplete :items="items" label="Start" />
<Autocomplete :items="items" label="Center" label-position="center" />
<Autocomplete :items="items" label="End" label-position="end" />
<Autocomplete :items="items" label="Inline" inline />
</template>
<script>
export default {
data() {
return {
items: [
{ key: 'PT', name: 'Portugal' },
{ ... }
]
}
},
}
</script>
Validations
<template>
<Autocomplete :errors="['Country name is too short']" />
</template>
Sizes
<template>
<Autocomplete :items="items" size="sm" label="Small autocomplete" />
<Autocomplete :items="items" size="md" label="Normal autocomplete" />
<Autocomplete :items="items" size="lg" label="Large autocomplete" />
</template>
<script>
export default {
data() {
return {
items: [
{ key: 'PT', name: 'Portugal' },
{ ... }
]
}
},
}
</script>
Icons
<template>
<Autocomplete :items="items" icon="chat-3-line" size="sm" />
<Autocomplete :items="items" icon="chat-3-line" size="md" />
<Autocomplete :items="items" icon="chat-3-line" size="lg" />
<Autocomplete :items="items" icon="chat-3-line" icon-position="end" size="sm" />
<Autocomplete :items="items" icon="chat-3-line" icon-position="end" size="md" />
<Autocomplete :items="items" icon="chat-3-line" icon-position="end" size="lg" />
</template>
<script>
export default {
data() {
return {
items: [
{ key: 'PT', name: 'Portugal' },
{ ... }
]
}
},
}
</script>
States
Loading
The autocomplete component is in loading state whenever the user starts typing and until the get-items callback function returns or the autocomplete local filtering ends.
Disabled
<template>
<Autocomplete :items="items" placeholder="Disabled autocomplete" disabled />
</template>
<script>
export default {
data() {
return {
items: [
{ key: 'PT', name: 'Portugal' },
{ ... }
]
}
},
}
</script>