Advanced Tagging Input Examples

Tags.js is an advanced, feature-rich tagging system used to manage (add, remove, validate) tags & tokens with an input field.

1. Basic Usage

html:
<div id="testtag1" tagname="test1"></div>
js:
$(document).ready(function(){
	$("#testtag1").tagsInit();
});
Result

Before Input Callback

html:
<div id="testtag2" tagname="test2"></div>
js:
$(document).ready(function(){
	$("#testtag2").tagsInit({
		inputNote:"Type Something Here",
		del:false,
		beforeInput:function(tagValue){
			if(tagValue=='aaa'){
				alert("aaa is not allowed");
				return false;
			}
		}
	});
});
Result:

Custom Click Action

html:
<div id="testtag3" tagname="test3"></div> <div id="testtag4" tagname="test4"></div>
js:
$(document).ready(function(){
	$("#testtag3").tagsInit({
		repeat:'Duplicate Tag',
		action:{href:'https://www.google.com/search?q=%v%',target:'_blank'}
	});
	$("#testtag4").tagsInit({
		onDel:function(){alert("Can NOT be deleted");return false;},
		action:function(tagValue){alert(tagValue);},
		theme:'black'
	});
});
Result

API Methods

html
<div>
	<input type="button" onclick="mytagsAdd()" value="tagsAdd"/>
	<input type="button" onclick="mytagsDel()" value="tagsDel"/>
	<input type="button" onclick="mytagsClear()" value="tagsClear"/>
	<input type="button" onclick="mytagsCount()" value="tagsCount"/>
	<input type="button" onclick="mytagsIndexof()" value="tagsIndexof"/>
	<input type="button" onclick="mytagsStr()" value="tagsStr"/>
	<input type="button" onclick="mytagsJson()" value="tagsJson"/>
</div>
<div id="testtag6" tagname="test6"></div>
js
var tag6=$("#testtag6").tagsInit();
function mytagsAdd(){
	tag6.tagsAdd(prompt("Tag Value"));
}
function mytagsDel(){
	tag6.tagsDel(prompt("Tag Value"));
}
function mytagsClear(){
	tag6.tagsClear();
}
function mytagsCount(){
	alert(tag6.tagsCount());
}
function mytagsIndexof(){
	alert(tag6.tagsIndexof(prompt("Tag Value")));
}
function mytagsStr(){
	alert(tag6.tagsStr());
}
function mytagsJson(){
	alert(tag6.tagsJson());
}
Result