帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

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

帝国模板之家 2020-11-23 网页特效 评论

插件介绍:

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();
有些事,即便认为它是完美的,也可以通过再次努力推动它,来获得价值以上的东西。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言