Press "Enter" to skip to content

Simple Tag Input Using Typeahead Autocomplete Built With Vue.js

Voerro Tags Input is a fully configurable Vue.js tag input that comes with an easy-to-use autocomplete/write the function as you type. 

typeahead tags input autocomplete ajax, vue javascript tags input, bootstrap tags input cdn, tags input in css and javascript, get all input tags javascript

How to make use of it:

Install and download:

# Yarn
$ yarn add @voerro/vue-tagsinput

# NPM
$ npm i @voerro/vue-tagsinput --save

1. Import and register the vue-tagsinput component.

import VoerroTagsInput from '@voerro/vue-tagsinput';
Vue.component('tags-input', VoerroTagsInput);

2. Import the desired style sheet.

@import './dist/style.css';
// or
<link rel="stylesheet" href="/dist/style.css" />

3. Add vue-tagsinput to the application template, select the predefined tags, and specify whether to enable the autocomplete function.

<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. Component props available to configure tag 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
},

Tags Input With Typeahead Support, Voerro Vue Tags Input Plugin/Github


See Demo And Download

Official Website(voerro): Click Here

This superior jQuery/javascript plugin is developed by voerro. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *