<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
Array.prototype.unique = function () {
var r = new Array();
o:for(var i = 0, n = this.length; i < n; i++) {
for(var x = 0, y = r.length; x < y; x++) {
if(r[x].toLowerCase()==this[i].toLowerCase()) continue o;
}
if(this[i].length!=0) r[r.length] = this[i];
}
return r;
}
function trim (array) {
charlist = ' \\s\\xA0';
var re = new RegExp('^[' + charlist + ']+|[' + charlist + ']+$', 'g');
for (var i = 0; i < array.length; i++) array[i]=array[i].replace(re, "");
return array;
}
$(document).ready(function() {
$("#button").click(function() {
var newTags=$("#textfield").val().toLowerCase().split(/,|;/);
if(newTags=='') return;
newTags=trim(newTags);
var existsTags=$("#tagsT").val().split(/,/);
var tags= existsTags!="" ? existsTags.concat(newTags).unique().sort() : newTags.unique().sort();
$("#tagsT").val(tags);
$("#tags").empty();
$("#textfield").val("");
for (var i = 0; i < tags.length; i++) {
$comma= tags.length-1==i ? "" : ",";
$("#tags").append($("<span>"+tags[i]+"<img src='/admin/i/delete.png' class='delTag' alt='Удалить тег' />"+$comma+" </span>"))
}
});
});
</script>
</head>
<body>
<div id="tags"></div>
<input type="text" name="tagsT" id="tagsT" value="" />
<p>
<input type="text" name="textfield" id="textfield" value="" />
<input type="submit" name="button" id="button" value="Submit" />
</p>
</body>
</html>
Если кому надо рабочий пример, может коряво написанный, но работает
.
