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

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

使用方法

在页面中引入amsify.suggestags.css和amsify.suggestags.js文件。

HTML结构

页面布局的HTML结构如下。

初始化插件

$('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[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');