这是一款带自动提示功能的jQuery标签输入插件。该插件可以指定一组预定义的标签,在输入某个关键字之后,便会提示出所有的可用标签供选择,非常方便。
使用方法
在页面中引入amsify.suggestags.css和amsify.suggestags.js文件。
<link rel="stylesheet" type="text/css" href="css/amsify.suggestags.css"> <script src="js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/jquery.amsify.suggestags.js"></script>
HTML结构
页面布局的HTML结构如下。
<input type="text" class="form-control" name="country"/>
初始化插件
$('input[name="country"]').amsifySuggestags();
通过suggestions
参数来设置提示功能。
$('input[name="country"]').amsifySuggestags({ suggestions: ['India', 'Pakistan', 'Nepal', 'UAE', 'Iran', 'Bangladesh'] });
白名单功能:除了指定的输入框之外,其它的输入框不具备建议提示功能。
$('input[name="country"]').amsifySuggestags({ suggestions: ['India', 'Pakistan', 'Nepal', 'UAE', 'Iran', 'Bangladesh'], whiteList: true });
自定义样式。
<input type="text" class="form-control" name="country"/> $('input[name="country"]').amsifySuggestags({ suggestions: ['India', 'Pakistan', 'Nepal', 'UAE', 'Iran', 'Bangladesh'], whiteList: true, classes: ['bg-primary', 'bg-success', 'bg-danger', 'bg-warning', 'bg-info'] }); // 设置背景色 $('input[name="country"]').amsifySuggestags({ suggestions: ['India', 'Pakistan', 'Nepal', 'UAE', 'Iran', 'Bangladesh'], whiteList: true, backgrounds: ['blue', 'green', 'red', 'orange', '#424242'], colors: ['white', 'black', 'white', 'black', 'white'], });
回调方法。
$('input[name="country"]').amsifySuggestags({ afterAdd : function(value) { console.info(value); // Parameter will be value }, afterRemove : function(value) { console.info(value); // Parameter will be value }, });
监听添加和移除标签事件。
$('input[name="country"]').on('suggestags.add', function(e){ // Do something while adding tag }); $('input[name="country"]').on('suggestags.remove', function(e){ // Do something while removing tag });
限制输入标签的数量。
$('input[name="country"]').amsifySuggestags({ tagLimit: 5 });
刷新和销毁插件。
var params = { // Make sure you have parameters which used during first execution }; $('input[name="country"]').amsifySuggestags(params, 'refresh'); $('input[name="country"]').amsifySuggestags({}, 'destroy');
该带自动提示功能的jQuery标签输入插件的github网址为:https://github.com/amsify42/jquery.amsify.suggestags
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!