网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
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();
转载请注明来源:jquery tags标签输入/删除特效插件(amsify.suggestags.js)
本文永久链接地址:https://www.moyouyouw.cn/code/786.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论