<link href=\"/Styles/tagsinput.css\" rel=\"external nofollow\" rel=\"stylesheet\" type=\"text/css\" />
<script src=\"/Scripts/jquery-1.4.1.min.js\" type=\"text/javascript\"></script>
<script src=\"/Scripts/jquery.tagsinput.js\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
$(function () {
$(\"#txtTags\").TagsInput({
usedTags: \"css|js|jquery|html|C#|.net|web\",
hotTags: \"hotTag1|hotTag2|hotTag3|hotTag4\",
tagNum: 10,
maxWords: 10
});
});
</script>

<input type=\"text\" value=\"逗号|分号|空格|Tab|回车键\" name=\"txtTags\" id=\"txtTags\" />

.clearfix:after
{
clear: both;
content: \" \";
display: block;
height: 0;
}
.tags-wrapper
{
width: 500px;
position:relative;
}
#addTagWrap
{
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #D9D9D9;
padding: 0 5px;
}
#addTagWrap .inner-tag-wrapper,.layer-tag-name
{
background: none repeat scroll 0 0 #40A8CD;
border-radius: 3px;
color: #FFFFFF;
float: left;
height: 26px;
line-height: 26px;
margin: 4px 6px 0 0;
padding: 0 5px 0 10px;
white-space: nowrap;
}
#addTagWrap .inner-tag-close
{
color: #A0D4E6;
font-family: \"宋体\" ,sans-serif;
margin-left: 4px;
text-decoration: none;
}
#tagInput
{
background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
margin: 0;
height: 24px;
line-height: 24px;
overflow: hidden;
padding: 5px;
width: 215px;
}
#tagInput:focus{ outline:none }
.layer-tags-wrapper
{
border: 1px solid #DADADA;
border-top:0;
overflow: auto;
position:absolute;
left:0;
right:0;
display:none;
background: none repeat scroll 0 0 #FFFFFF;
}
.layer-tags-wrapper .layer-tags-box
{
padding: 0 5px;
}
.layer-tags-wrapper .layer-tags-left
{
float: left;
text-align: center;
padding-right: 5px;
margin-top: 4px;
height: 26px;
line-height: 26px;
}
.layer-tags-wrapper .layer-tags-right
{
overflow: auto;
}
.layer-tags-wrapper .layer-tag-name
{
padding-right: 10px;
text-decoration: none;
}
.layer-tags-foot
{
height: 30px;
line-height: 30px;
color: #999999;
padding-left:5px;
}
.layer-tags-foot-top
{
margin-top:5px;
border-top:1px dotted #C9C9C9;
}
.message-box
{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.35);
color: #FFFFFF;
width: 300px;
min-height: 50px;
line-height: 50px;
top: 50%;
left: 50%;
margin-top: -50px; /*注意这里必须是DIV高度的一半*/
margin-left: -150px; /*这里是DIV宽度的一半*/
position: fixed !important; /*FF IE7*/
position: absolute; /*IE6*/
z-index: 999;
text-align: center;
border-radius: 5px;
}

/*仿百度标签输入v0.1
* @name jquery.tagsinput.js
* @version 0.1
* @author liping
* @date 2014/06/10
* @Email:272323108@qq.com
*/
(function ($) {
$.fn.TagsInput = function (options) {
//默认参数
var defaults = {
usedTags: \"\",
hotTags: \"\",
tagNum: 0,
maxWords: 0
};
//用传入参数覆盖了默认值
var opts = $.extend(defaults, options);
//对象
var $this = $(this);
$this.hide();
var arrayTags;
var strHtml;
strHtml = \"<div class=\\\"tags-wrapper clearfix\\\">\";
strHtml += \"<div id=\\\"addTagWrap\\\" ><div class=\\\"added-tags-wrapper\\\"></div>\";
strHtml += \"<input id=\\\"tagInput\\\" type=\\\"text\\\" placeholder=\\\"添加标签，以逗号、分号或空格隔开\\\" autocomplete=\\\"off\\\">\";
strHtml += \"</div><div class=\\\"layer-tags-wrapper\\\">\";
if (opts.usedTags != \"\") {
strHtml += \"<div class=\\\"clearfix layer-tags-box\\\"><div class=\\\"layer-tags-left\\\">记忆标签</div><div class=\\\"layer-tags-right\\\">\";
arrayTags = opts.usedTags.split(\'|\');
for (i = 0; i < arrayTags.length; i++) {
strHtml += \"<a class=\\\"layer-tag-name\\\" href=\\\"javascript:;\\\">\" + arrayTags[i] + \"</a>\";
}
strHtml += \"</div></div>\";
}
if (opts.hotTags != \"\") {
strHtml += \"<div class=\\\"clearfix layer-tags-box\\\"><div class=\\\"layer-tags-left\\\">热门标签</div><div class=\\\"layer-tags-right\\\">\";
arrayTags = opts.hotTags.split(\'|\');
for (i = 0; i < arrayTags.length; i++) {
strHtml += \"<a class=\\\"layer-tag-name\\\" href=\\\"javascript:;\\\">\" + arrayTags[i] + \"</a>\";
}
strHtml += \"</div></div>\";
}
if (opts.tagNum != 0 && opts.maxWords != 0) {
strHtml += \"<div class=\\\"layer-tags-foot clearfix \\\">最多可添加\" + opts.tagNum + \"个标签，每个标签不超过\" + opts.maxWords + \"个汉字</div>\";
}
else if (opts.tagNum != 0 && opts.maxWords == 0) {
strHtml += \"<div class=\\\"layer-tags-foot clearfix \\\">最多可添加\" + opts.tagNum + \"个标签</div>\";
}
else if (opts.tagNum == 0 && opts.maxWords != 0) {
strHtml += \"<div class=\\\"layer-tags-foot clearfix \\\">每个标签不超过\" + opts.maxWords + \"个汉字</div>\";
}
else {
strHtml += \"<div class=\\\"layer-tags-foot clearfix \\\">标签个数最好少于10个，每个标签最好不超过10个汉字</div>\";
}
strHtml += \"</div></div>\";
$(strHtml).insertAfter($this);
if ($(\".layer-tag-name\").length > 0) {
$(\".layer-tags-foot\").addClass(\"layer-tags-foot-top\");
}

var inputTags = $this.val();
arrayTags = inputTags.split(\'|\');
for (i = 0; i < arrayTags.length; i++) {
addTag(arrayTags[i]);
}
$(\".layer-tag-name\").each(function () {
$(this).click(function () { addTag($(this).text()); });
});

$(\"#tagInput\").keydown(function (e) {
var keyCode = e.which || e.keyCode;
if (keyCode == 13 || keyCode == 32 || keyCode == 9) {
if (addTag($(this).val())) { $(this).val(\"\"); }
return false;
}
}).keyup(function (e) {
var keyCode = e.which || e.keyCode;
if (keyCode == 188 || keyCode == 59) {
if (addTag($(this).val())) { $(this).val(\"\"); }
return false;
}
}).click(function () {
$(\".layer-tags-wrapper\").show();
}).blur(function () {
if (addTag($(this).val())) { $(this).val(\"\"); }
return false;
});

$(\".tags-wrapper\").mouseleave(function () {
$(\".layer-tags-wrapper\").hide();
});

function addTag(obj) {
obj = obj.replace(/[ |,|，|;|；]/g, \"\");
if (obj == \"\") { return false; }
//只统计汉字字数
var num = 0;
var arr = obj.match(/[^\\x00-\\xff]/g);
if (arr != null) {
num = arr.length;
if (opts.maxWords > 0 && num > opts.maxWords) {
MessageBox(\"单个标签最多\" + opts.maxWords + \"个汉字\");
return false;
}
num = 0;
}
var tags = $(\"#addTagWrap .inner-tag-name\");
var flag = true;
var s = \"\";
tags.each(function () {
if ($(this).text() == obj) {
flag = false;
return false;
}
num++;
s += $(this).text() + \"|\";
});
if (opts.tagNum > 0 && num >= opts.tagNum) {
MessageBox(\"最多可添加\" + opts.tagNum + \"个标签\");
return false;
}
if (flag) {
$(\".added-tags-wrapper\").append(\"<div class=\\\"inner-tag-wrapper\\\"><span class=\\\"inner-tag-name\\\">\" + obj + \"</span><a class=\\\"inner-tag-close\\\" title=\\\"删除\\\" href=\\\"javascript:;\\\">×</a></div>\");
$(\".added-tags-wrapper .inner-tag-close:last\").click(function () {
$(this).parent().remove();
});
s += obj + \"|\";
if (s.length > 0) {
s = s.substring(0, s.length - 1);
$this.val(s);
}
return true;
}
else {
MessageBox(\"该标签已经存在\");
return false;
}
}

function MessageBox(obj) {
$(\"<div class=\\\"message-box\\\">\" + obj + \"</div>\").appendTo(\"body\");
$(\".message-box\").delay(1000).fadeOut(\"slow\", function () {
$(this).remove();
});
}
};
})(jQuery);