A simple-to-use yet fully configurable tags input Vue.js component that comes with a user-friendly autocomplete/typeahead functionality while typing.
How to use it:
1. Import and register the vue-tagsinput component.
import VoerroTagsInput from '@voerro/vue-tagsinput'; Vue.component('tags-input', VoerroTagsInput);
2. Import the required stylesheet.
@import './dist/style.css'; // or <link rel="stylesheet" href="/dist/style.css" />
3. Add the vue-tagsinput to the app template, define the pre-selected tags, and determine if enable the autocomplete functionality.
<tags-input element-id="tags" v-model="selectedTags" :existing-tags="[ { key: 'react', value: 'React' }, { key: 'angular', value: 'Angular' }, { key: 'vue', value: 'Vue' }, ]" :typeahead="true"> </tags-input>
4. Available component props to config the tags input.
elementId: String, inputId: String, existingTags: { type: Array, default: () => { return []; } }, value: { type: Array, default: () => { return []; } }, idField: { type: String, default: 'key', }, textField: { type: String, default: 'value', }, valueFields: { type: String, default: null, }, disabled: { type: Boolean, default: false }, typeahead: { type: Boolean, default: false }, typeaheadStyle: { type: String, default: 'badges' }, typeaheadActivationThreshold: { type: Number, default: 1 }, typeaheadMaxResults: { type: Number, default: 0 }, typeaheadAlwaysShow: { type: Boolean, default: false }, typeaheadShowOnFocus: { type: Boolean, default: true }, typeaheadHideDiscard: { type: Boolean, default: false }, typeaheadUrl: { type: String, default: '' }, placeholder: { type: String, default: 'Add a tag' }, discardSearchText: { type: String, default: 'Discard Search Results' }, limit: { type: Number, default: 0 }, hideInputOnLimit: { type: Boolean, default: false }, onlyExistingTags: { type: Boolean, default: false }, deleteOnBackspace: { type: Boolean, default: true }, allowDuplicates: { type: Boolean, default: false }, validate: { type: Function, default: () => true }, addTagsOnComma: { type: Boolean, default: false }, addTagsOnSpace: { type: Boolean, default: false }, addTagsOnBlur: { type: Boolean, default: false }, wrapperClass: { type: String, default: 'tags-input-wrapper-default' }, sortSearchResults: { type: Boolean, default: true }, caseSensitiveTags: { type: Boolean, default: false }, beforeAddingTag: { type: Function, default: () => true }, beforeRemovingTag: { type: Function, default: () => true },
5. Available event handlers.
- @initialized – Fired when the component is completely ready to be worked with. Fired from the Vue.js’ mounted() method.
- @tag-added – Fired when a new tag is added. The slug of the tag is passed along.
- @tag-removed – Fired when a tag is removed. The slug of the tag is passed along.
- @tags-updated – Fired when a tag is added or removed.
- @limit-reached – Fired when the limit of tags is reached.
- @keydown – Fires on a keydown event.
- @keyup – Fires on a keyup event.
- @focus – Fired when the input is focused.
- @blur – Fired when the input is blurred.
- @change – Fired when the input text change.
Preview:
Changelog:
v2.7.1 (03/31/2021)
- Typeahead callback – search query as parameter
v2.6.0 (03/26/2021)
- Fix: typeahead suggestions not emptied with empty input field
Download Details:
Author: voerro
Live Demo: https://voerro.github.io/vue-tagsinput/
Download Link: https://github.com/voerro/vue-tagsinput/archive/master.zip
Official Website: https://github.com/voerro/vue-tagsinput
Install & Download:
# Yarn
$ yarn add @voerro/vue-tagsinput
# NPM
$ npm i @voerro/vue-tagsinput --save