To have autocomplete functionality, add the autocomplete prop.
You can add any prop from Autocomplete API.
Taginput
A simple tag input field that can have autocomplete functionality
Tags: [ "Auckland", "Wellington", "Very long string that would overflow" ]
<template>
<section>
<b-field label="Add some tags">
<b-taginput
v-model="tags"
ellipsis
icon="label"
placeholder="Add a tag">
</b-taginput>
</b-field>
<p class="content"><b>Tags:</b> {{ tags }}</p>
</section>
</template>
<script>
export default {
data() {
return {
tags: [
'Auckland',
'Wellington',
'Very long string that would overflow'
]
}
}
}
</script>
# Autocomplete
Tags:[]
<template>
<section>
<div class="block">
<b-switch v-model="allowNew">
Allow new tags
</b-switch>
<b-switch v-model="openOnFocus">
Open on focus
</b-switch>
</div>
<b-field label="Enter some tags">
<b-taginput
v-model="tags"
:data="filteredTags"
autocomplete
:allow-new="allowNew"
:open-on-focus="openOnFocus"
field="user.first_name"
icon="label"
placeholder="Add a tag"
@typing="getFilteredTags">
</b-taginput>
</b-field>
<pre style="max-height: 400px"><b>Tags:</b>{{ tags }}</pre>
</section>
</template>
<script>
const data = require('@/data/sample.json')
export default {
data() {
return {
filteredTags: data,
isSelectOnly: false,
tags: [],
allowNew: false,
openOnFocus: false
}
},
methods: {
getFilteredTags(text) {
this.filteredTags = data.filter((option) => {
return option.user.first_name
.toString()
.toLowerCase()
.indexOf(text.toLowerCase()) >= 0
})
}
}
}
</script>
# Templated Autocomplete
Slots are available for autocomplete items and the empty message, like with the Autocomplete control.
Tags:[]
<template>
<section>
<b-field label="Enter some tags">
<b-taginput
v-model="tags"
:data="filteredTags"
autocomplete
field="user.first_name"
icon="label"
placeholder="Add a tag"
@typing="getFilteredTags">
<template slot-scope="props">
<strong>{{props.option.id}}</strong>: {{props.option.user.first_name}}
</template>
<template slot="empty">
There are no items
</template>
</b-taginput>
</b-field>
<pre style="max-height: 400px"><b>Tags:</b>{{ tags }}</pre>
</section>
</template>
<script>
const data = require('@/data/sample.json')
export default {
data() {
return {
filteredTags: data,
isSelectOnly: false,
tags: []
}
},
methods: {
getFilteredTags(text) {
this.filteredTags = data.filter((option) => {
return option.user.first_name
.toString()
.toLowerCase()
.indexOf(text.toLowerCase()) >= 0
})
}
}
}
</script>
# Limits
You can limit the length and number of tags with the maxlength and maxtags props.
Maxlength counter is only shown when typing.
<template>
<section>
<b-field label="Limited to 10 characters">
<b-taginput
maxlength="10"
:value="['Bulma', 'Vue', 'Buefy']">
</b-taginput>
</b-field>
<b-field label="Limited to 5 tags">
<b-taginput
maxtags="5"
:value="['One', 'Two', 'Three', 'Four']">
</b-taginput>
</b-field>
<b-field label="Limited to 10 characters and 5 tags">
<b-taginput
maxlength="10"
maxtags="5"
:value="['Red', 'Green', 'Blue', 'White']">
</b-taginput>
</b-field>
</section>
</template>
# States
You can change the input type setting a type on Field.
<template>
<section>
<b-field
label="Success"
type="is-success">
<b-taginput
:value="['Tag']">
</b-taginput>
</b-field>
<b-field
label="Error"
type="is-danger">
<b-taginput
:value="['Tag']">
</b-taginput>
</b-field>
<b-field
label="Info"
type="is-info">
<b-taginput
:value="['Tag']">
</b-taginput>
</b-field>
<b-field
label="Warning"
type="is-warning">
<b-taginput
:value="['Tag']">
</b-taginput>
</b-field>
<b-field label="Disabled">
<b-taginput
:value="['Tag']"
disabled>
</b-taginput>
</b-field>
<b-field label="Loading">
<b-taginput
:value="['Tag']"
loading>
</b-taginput>
</b-field>
</section>
</template>
# Tag types
<template>
<section>
<b-field label="Dark">
<b-taginput
v-model="tags"
type="is-dark">
</b-taginput>
</b-field>
<b-field label="Info">
<b-taginput
v-model="tags"
type="is-info">
</b-taginput>
</b-field>
<b-field label="Success">
<b-taginput
v-model="tags"
type="is-success">
</b-taginput>
</b-field>
<b-field label="Warning">
<b-taginput
v-model="tags"
type="is-warning">
</b-taginput>
</b-field>
<b-field label="Danger">
<b-taginput
v-model="tags"
type="is-danger">
</b-taginput>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
tags: [
'Auckland',
'Wellington',
'Napier'
]
}
}
}
</script>
# Sizes
<template>
<section>
<b-field label="Small">
<b-taginput
v-model="tags"
size="is-small">
</b-taginput>
</b-field>
<b-field label="Default">
<b-taginput
v-model="tags">
</b-taginput>
</b-field>
<b-field label="Medium">
<b-taginput
v-model="tags"
size="is-medium">
</b-taginput>
</b-field>
<b-field label="Large">
<b-taginput
v-model="tags"
size="is-large">
</b-taginput>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
tags: [
'Auckland',
'Wellington',
'Napier'
]
}
}
}
</script>
# Modifiers
You can change the style of the tags by setting the rounded and attached props.
<template>
<section>
<b-field label="Rounded">
<b-taginput
v-model="tags"
rounded>
</b-taginput>
</b-field>
<b-field label="Attached">
<b-taginput
v-model="tags"
attached>
</b-taginput>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
tags: [
'Auckland',
'Wellington',
'Napier'
]
}
}
}
</script>
# Validation
You can validate the value before adding it to the tag list
<template>
<section>
<b-field label="Tags with 3 characters">
<b-taginput
v-model="tags"
:before-adding="beforeAdding">
</b-taginput>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
tags: [
'123',
'456',
'789'
]
}
},
methods: {
beforeAdding(tag) {
return tag.length === 3;
},
},
}
</script>
# API
Name | Description | Type | Values | Default |
|---|---|---|---|---|
v-model | Binding value | Array<String>, Array<Number>, Array<Object> | — | — |
maxlength | Limits the length of each tag, plus character counter | String, Number | — | — |
maxtags | Limits the number of tags, plus tag counter | String, Number | — | — |
has-counter | Show counter when maxlength or maxtags props are passed | Boolean | — | true |
type | Type (color) of the tags, optional | String | is-white, is-black, is-light,
is-dark, is-primary, is-info, is-success,
is-warning, is-danger,
and any other colors you've set in the $colors list on Sass | is-light |
size | Tag and input size, optional | String | is-small, is-medium, is-large | is-medium |
rounded | Makes the tags rounded, optional | Boolean | — | false |
attached | Makes the tags attached instead of having an appended delete button, optional | Boolean | — | false |
ellipsis | Adds ellipsis on tags to not overflow the text. Title is then added to the tag with full text | Boolean | — | false |
closable | Add close/delete button to the tag | Boolean | — | true |
field | Property of the object (if data is array of objects) to use as display text | String | — | value |
autocomplete | Add autocomplete feature (if true, any Autocomplete props may be used too) | Boolean | — | false |
allow-new | When autocomplete, it allow to add new tags | Boolean | — | false |
remove-on-keys | Allow removing last tag when pressing given keys, if input is empty | Array | — | [8] |
confirm-key-codes | Array of key codes which will add a tag when typing (default comma, enter and tab) | Array | — | [13, 188, 9] |
on-paste-separators | Array of chars used to split when pasting a new string | Array | — | [','] |
before-adding | Function to validate the value of the tag before adding | Function | — | (tagToAdd) => true |
allow-duplicates | Allows adding the same tag multiple times | Boolean | — | false |
readonly | Disable input/typing | Boolean | — | false |
check-infinite-scroll | Makes the autocomplete component check if list reached scroll end and emit infinite-sroll event. | Boolean | — | false |
| Any other native attribute | — | — | — | — |
# Variables
You can use these variables to customize this component.
Name | Default |
|---|---|
$taginput-height | 1.7em |
This page is open source. Noticed a typo or something's unclear?