带自动提示功能的jQuery标签输入插件

带自动提示功能的jQuery标签输入插件

这是一款带自动提示功能的jQuery标签输入插件。该插件可以指定一组预定义的标签,在输入某个关键字之后,便会提示出所有的可用标签供选择,非常方便。

使用方法
在页面中引入amsify.suggestags.css和amsify.suggestags.js文件。

1
2
3
<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结构如下。

1
<input type="text" class="form-control" name="country"/>

初始化插件

1
$('input[name="country"]').amsifySuggestags();

通过suggestions参数来设置提示功能。

1
2
3
$('input[name="country"]').amsifySuggestags({
    suggestions: ['India', 'Pakistan', 'Nepal', 'UAE', 'Iran', 'Bangladesh']
});

白名单功能:除了指定的输入框之外,其它的输入框不具备建议提示功能。

1
2
3
4
$('input[name="country"]').amsifySuggestags({
  suggestions: ['India', 'Pakistan', 'Nepal', 'UAE', 'Iran', 'Bangladesh'],
  whiteList: true
});

自定义样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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'],
});

回调方法。

1
2
3
4
5
6
7
8
$('input[name="country"]').amsifySuggestags({
  afterAdd : function(value) {
    console.info(value); // Parameter will be value
  },
  afterRemove : function(value) {
    console.info(value); // Parameter will be value
  },
});

监听添加和移除标签事件。

1
2
3
4
5
6
$('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
});

限制输入标签的数量。

1
2
3
$('input[name="country"]').amsifySuggestags({
  tagLimit: 5
});

刷新和销毁插件。

1
2
3
4
5
var params = {
    // Make sure you have parameters which used during first execution
};
$('input[name="country"]').amsifySuggestags(params, 'refresh');
$('input[name="country"]').amsifySuggestags({}, 'destroy');
当前内容只有登录了才能查看,如果您已经注册,请登录
4

发表评论