Vuejs Autocomplete Input Tags component

In this Post We Will Explain About is Vuejs Autocomplete Input Tags component With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vue.js tag input component Example

In this post we will show you Best way to implement Simple tags input with VueJS, hear for Create your own Autocomplete using Vue.js with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Vue.js 2 Input Tag Component Example

Just html bind an all the array of tags to component of v-model property.

• any text write and press simple enter key to add a new tag input label.
• just Press left side(it needs to be at simple array livepos 0 in the text input value label) as well as simple press right key (it more needs to be at array pop last livepos in the textbox input value set in label) in order to simple change livepos of the textbox input in the label list.
• Press simple backspace two times (within a one second and a second half) main aimed at label deleting textbox input previous tag.

There’s a all the json value separator all the property default to use simple space, so We can change it to comma separator.

Include External Libs

https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.js
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

index.html

	
Live Enter Very simple tags-input using VueJS 2
	
	
	
	
		 Readonly
	

index.js

Vue.config.keyCodes.backspace = 8

var tagsInput = Vue.component('tagsInput', Vue.extend({
	template: '#tagsInput-template',
	props: ['tags', 'readonly'],
	data(){
    return{
			addnewtag: '',
			tagconfirmWait: false,
			livepos: 1
    }
  },
	computed: {
		liveTags: function() {
			return this.tags.slice(0, this.livepos)
		},
		mysecondtag: function() {
			return this.tags.slice(this.livepos, this.tags.length)
		}
	},
	methods: {
		add() {
			this.tags.splice(this.livepos, 0, this.addnewtag)
			this.livepos += 1
			this.addnewtag = ''
		},
		tagcheckremove() {
			if(this.tagconfirmWait) {
				if(this.addnewtag.length===0) {
					this.tags.splice(this.livepos-1, 1)
					this.livepos -= 1
					if(this.tagconfirmWait)
						clearTimeout(this.tagconfirmWait)
					this.tagconfirmWait = false
				}
			} else {
				//this.tagconfirmWait = true
				var _this = this
				this.tagconfirmWait = setTimeout(function(){
					_this.tagconfirmWait = false;
				}, 1500)
			}
		},
		left() {
			var pos = event.target.selectionStart;
			if(pos===0) {
				this.livepos = Math.max(0, this.livepos-1);
			}
			var live_evt = event
			setTimeout(function() {
				console.log(live_evt.target)
				live_evt.target.focus()
			}, 1300)
		},
		right() {
			var pos = event.target.selectionStart;
			if(pos===this.addnewtag.length) {
				this.livepos = Math.min(this.tags.length, this.livepos+1);
			}
			var live_evt = event
			setTimeout(function() {
				live_evt.target.focus()
			}, 200)
		}
	}
}))

var liveApp = new Vue({
  el:'#liveApp',
  data(){
    return{
			tags: ['Laravel', 'PHP', 'Angularjs', 'Vuejs'],
			readonly: false
    }
  }
})

style.css

.tags {
	
	display: flex;
	flex-direction: row;
	flex-shrink: 0;
	
	.liveIput {
		width: auto;
		padding-right: 1rem;
		background: rgba($cyan, 0.2);
		margin: 0 .2rem;
		
		&.deleting {
			background: $red;
		}
	}
	
	input {
		margin: 0 .2rem;
		max-width: 15rem;
		opacity: 1;
		transition: all .3s ease-in-out;
	}
	
	input[readonly] {
		max-width: 0;
		opacity: 0;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		pointer-events: none;
	}
}

label {
	margin: 1rem 0;
}

#liveApp {
	padding: 2rem;
	h1 {
		margin-bottom: 1rem;
	}
}

Example

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is Vuejs And Typeahead Auto Complete And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.