表单/表格
带自动提示功能的jQuery标签输入插件
PetitQ
这是一款带自动提示功能的 jQuery 标签输入插件。该插件可以指定一组预定义的标签，在输入某个关键字之后，便会提示出所有的可用标签供选择，非常方便。
使用方法
在页面中引入 amsify.suggestags.css 和 amsify.suggestags.js 文件。
也想出现在这里？联系我们吧
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');
Github 网址：https://github.com/amsify42/jquery.amsify.suggestags
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
