这是一款带自动完成功能的jQuery标签输入插件。该jQuery标签输入插件还能实现简单的验证功能，并且采用响应式设计，十分实用。

使用方法

在页面中引入jquery和jqueryui文件，以及jquery.tagsinput-revisited.css和jquery.tagsinput-revisited.js文件。

<link href="css/jquery-ui.css" rel="stylesheet">
<link href="css/jquery.tagsinput-revisited.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.tagsinput-revisited.js"></script>

HTML

使用一个input标签作为输入标签的容器，value中设置的值可以作为预定义标签使用。

<input id="example" name="example" type="text" value="jQuery,Script,Net">

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该jquery标签输入插件。

$('#example').tagsInput();

配置参数

该jquery标签输入插件的可用配置参数有：

$('.tagsinput#tags').tagsInput({
	interactive: true,
	placeholder: 'Add a tag',
	minChars: 2,
	maxChars: 20, // if not provided there is no limit
	limit: 5, // if not provided there is no limit
	validationPattern: new RegExp('^[a-zA-Z]+$'), // a pattern you can use to validate the input
	width: '300px', // standard option is 'auto'
	height: '100px', // standard option is 'auto'
	autocomplete: { option: value, option: value},
	hide: true,
	delimiter: [',',';'], // or a string with a single delimiter
	unique: true,
	removeWithBackspace: true,
	onAddTag: callback_function,
	onRemoveTag: callback_function,
	onChange: callback_function
});

GitHub地址：https://github.com/underovsky/jquery-tagsinput-revisited

在线预览 网盘下载

下载密码: 5eky