Tagging input fields using jQuery TagsInput plugin

Posted By : Sachin Verma | 11-Nov-2013

jquery

jQuery Tags-Input Plugin (Convert boring text inputs into magical taggling interfaces)

jQuery Tags-input plugin is brilliant add-on for our TextFields to make them accepting Tags as input as you may have seen in Gmail, StackOverflow etc. daily use applications.

Tags-input plugin provides a lots of functionalities and a very user-friendly and best of all it is much easy to implement and provided to world's most popular javascript library jQuery.

Things we can do with Tags-input plugin:

Autocomplete feature
Add/Remove multiple tags
Manage Size
Event Handling
All normal textfield featues.

Let's understand how Tags-Input works.

First you have to import Tags-Input css and javascript resources.

Secondly, select all your nomal textFields and tagglify them

$(document).ready(function () {
	$('input[id^="ct-input"]').tagsInput({
		'height':'35px',
		'width':'300px',
		'interactive':true,
		'autocomplete_url':"List or Url returning list",
		'onAddTag':function(){changeTags("add", this)} ,
		 'onRemoveTag': function(){changeTags("delete", this)}
});	
});

Just following these simple steps you have designed taggling input box interfaces.

Thank you for reading.