jquery tags标签输入/删除特效插件（amsify.suggestags.js）

演示  website 下载

插件介绍：

amsify.suggestags是一款简单的jQuery标签输入插件，它能将常规输入的标签转换为可多选、删除的标签。兼容Bootstrap 3/4，materialize等大多数框架。

使用说明：

1.下载最新版本插件，并在html页面中包含以下JavaScript和CSS文件：

<script src="jquery.min.js"></script>
<!-- Amsify Plugin -->
<link rel="stylesheet" href="/css/amsify.suggestags.css">
<script src="/js/jquery.amsify.suggestags.js"></script>

2.在页面中创建一个普通的输入字段，并在value属性中指定预选的tags标签（可选）。

<input type="text" name="color" value="Orange,Black">

3.插件初始化。

$('input[name="color"]').amsifySuggestags({
  type : 'amsify',
  suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange']
});
// or
$('input[name="color"]').amsifySuggestags({
  type : 'amsify',
  suggestions: [
    {'tag': 'Black', 'value': 1},
    {'tag': 'White', 'value': 2},
    {'tag': 'Red', 'value': 3},
    {'tag': 'Blue', 'value': 4},
    {'tag': 'Green', 'value': 5},
    {'tag': 'Orange', 'value': 6}
  ]
});

4. 使用第三方框架。

// requires the latest Bootstrap 4 or Bootstrap 3 framework
$('input[name="color"]').amsifySuggestags({
  type : 'bootstrap'
});

5. 指定允许输入的最大tags数量。默认值：-1（无限制）。

$('input[name="color"]').amsifySuggestags({
  type : 'bootstrap',
  suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'],
  tagLimit: 5
});

6. 自定义选定tags的外观。

$('input[name="color"]').amsifySuggestags({
  type : 'bootstrap',
  suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'],
  defaultTagClass: '',
  classes: [],
  backgrounds: [],
  colors: []
});

7. 阻止suggestions中未列出的自定义标签。

$('input[name="color"]').amsifySuggestags({
  type : 'bootstrap',
  suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'],
  whiteList: true
});

8. 是否悬停时选择tags。

$('input[name="color"]').amsifySuggestags({
  selectOnHover: true
});

9. 可用的回调函数。

$('input[name="color"]').amsifySuggestags({
  type : 'bootstrap',
  suggestions: ['Black', 'White', 'Red', 'Blue', 'Green', 'Orange'],
  afterAdd: function(value) {
    // after add
  },
  afterRemove: function(value) {
    // after remove
  },
});

10.通过AJAX获取suggestions中的标签。

$('input[name="color"]').amsifySuggestags({
  suggestionsAction : {
    timeout: -1, 
    minChars:2, 
    minChange:-1,
    delay: 100,
    type: 'GET',
    url: '/path/to/suggestions/',
    beforeSend : function() {
      console.info('beforeSend');
    },
    success: function(data) {
      console.info('success');
    },
    error: function() {
      console.info('error');
    },
    complete: function(data) {
      console.info('complete');
    }
  }
});

11.noSuggestionMsg。

$('input[name="color"]').amsifySuggestags({
  noSuggestionMsg: ''
});

12. 是否显示所有noSuggestionMsg标签。

$('input[name="color"]').amsifySuggestags({
  showAllSuggestions: false
});

13.是否保留输入文本字段中的最后一个suggestions标签。

$('input[name="color"]').amsifySuggestags({
  keepLastOnHoverTag: true
});

14.是否在控制台日志中打印值。默认值：true。

$('input[name="color"]').amsifySuggestags({
  printValues: true
});

15.是否检查类似的标签。默认值：true。

$('input[name="color"]').amsifySuggestags({
  checkSimilar: true
});

16. 自定义分隔符。默认值：[]。

$('input[name="color"]').amsifySuggestags({
  delimiters: []
});

17. 当焦点不在标签部分时，插件隐藏正在输入的标记，并显示+号。当失去焦点时，可以设置数字以隐藏给定数字后面的标记。默认值：0。

$('input[name="color"]').amsifySuggestags({
  showPlusAfter: 0
});

18. 您还可以使用suggestMatch函数将用户输入的文本与建议项匹配。

$('input[name="color"]').amsifySuggestags({
  suggestions: ['India', 'Pakistan', 'Nepal', 'UAE', 'Iran', 'Bangladesh'],
  suggestMatch : function(suggestionItem, value) {
    return ~suggestionItem.toString().toLowerCase().indexOf(value.toString().toLowerCase());
  }
});

19. API方法.

// add a new tag
amsifySuggestags.addTag('Purple');

// remove a tag
amsifySuggestags.removeTag('Red');

// update options
amsifySuggestags._settings({
  // options here
})

// refresh
amsifySuggestags.refresh();

// destroy
amsifySuggestags.destroy();