jQuery自定义标签输入插件Tagator js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery自定义标签输入插件Tagator js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jQuery自定义标签输入插件Tagator</title>
	<link rel="stylesheet" href="fm.tagator.jquery.css"/>
	<style>
		body {
			font-family: sans-serif;
			margin: 0;
			padding: 0;
		}
		#wrapper {width:600px;margin:100px auto;}
		.inputTagator{width:400px;border: 1px solid #abadb3;border-radius: 3px;box-sizing: border-box;background-color: #fff;display: inline-block;outline:none;}
		.operateBtn{padding:6px;}
		
	</style>
	<script src="jquery-1.11.0.min.js"></script>
	<script src="fm.tagator.jquery.js"></script>
	<script>
		$(function () {
			$('#activate_tagator').click(function () {
				if ($('#inputTagator').data('tagator') === undefined) {
					$('#inputTagator').tagator({
						autocomplete: ['内容', '内容一', '内容二', '内容三', '内容四', '内容五', '内容六', '内容七', '内容八',]
					});
					$('#activate_tagator').val('销毁 tagator');
				} else {
					$('#inputTagator').tagator('destroy');
					$('#activate_tagator').val('激活 tagator');
				}
			});
			$('#activate_tagator').trigger('click');
			$('#getvalue').click(function () {
				alert($("#inputTagator").val());
			});
		});
	</script>
</head>
<body>
	<div id="wrapper">
		<input id="inputTagator" name="inputTagator" value="内容,CHINAZ,JS代码" class="inputTagator">
		<input value="激活 tagator" id="activate_tagator" type="button" class="operateBtn">
        <input value="获取值" id="getvalue" type="button" class="operateBtn">
	</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)