Vuejs Autocomplete Input Tags component

Programming VueJs

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

<template id="tagsInput-template">
	<div class="tags">
		<span class="liveIput" v-for="(tag, index) in liveTags" :class="{ deleting: tagconfirmWait && livepos==index+1 }">{{tag}}</span>
		<input v-model="addnewtag" placeholder="Put Add" @keyup.enter="add()" @keyup.backspace="tagcheckremove()" @keyup.left="left()" @keyup.right="right()" :readonly="readonly"/>
		<span class="liveIput" v-for="(tag, index) in mysecondtag">{{tag}}</span>
	</div>
</template>

<div id="liveApp">

	<h1>Live Enter Very simple tags-input using VueJS 2</h1>
	
	<tags-input :tags="tags" :readonly="readonly"></tags-input>
	
	<label>
		<input type="checkbox" v-model="readonly" /> Readonly
	</label>
</div>

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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Vuejs Dynamic Dropdown Select Menu using json
  2.   VueJS Disable enable Selector Examples
  3.   Vuejs how to Set default value to option value selected
  4.   PHP jQuery AJAX Live check email Availability
  5.   Custom Global Helpers in Laravel 5.8
  6.   Dynamically Add Input Fields And Submit To Database With jQuery and PHP
  7.   vue.js check uncheck all checkboxes Example
  8.   Angularjs Get first and last value of list-item (li)
  9.   Laravel 5.8 - Get Last Inserted ID With Example
  10.   How to Select VueJs Check All Uncheck All Checkboxes

Leave a Reply

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