帶自動提示功能的jQuery標籤輸入外掛

這是一款帶自動提示功能的jQuery標籤輸入外掛。該外掛可以指定一組預定義的標籤，在輸入某個關鍵字之後，便會提示出所有的可用標籤供選擇，非常方便。

線上演示 下載

使用方法

在頁面中引入amsify.suggestags.css和amsify.suggestags.js檔案。

<link rel="stylesheet" type="text/css" href="css/amsify.suggestags.css">

<script src="js/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="js/jquery.amsify.suggestags.js"></script>

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');