jquery.tagsinput.js，不錯的标簽輸入框

一、效果

二、元件下載下傳

https://github.com/xoxco/jQuery-Tags-Input

三、元件使用

下載下傳後的readme中已經對常用的方法參數進行了解釋。

If additional functionality is required when a tag is added or removed, you may

specify callback functions via the onAddTag and onRemoveTag parameters. Both

functions should accept a single tag as the parameter.

If you do not want to provide a way to add tags, or you would prefer to provide

an alternate interface for adding tags to the box, you may pass an false into

the optional ‘interactive’ parameter. The tags will still be rendered as per

usual, and the addTag and removeTag functions will operate as expected.

If you want a function to be called every time a tag is updated/deleted, set it

as the ‘onChange’ option.

By default, if the cursor is immediately after a tag, hitting backspace will

delete that tag. If you want to override this, set the ‘removeWithBackspace’

option to false.

Options

“`js

$(selector).tagsInput({

‘autocomplete_url’: url_to_autocomplete_api,

‘autocomplete’: { option: value, option: value},

‘height’:’100px’,

‘width’:’300px’,

‘interactive’:true,

‘defaultText’:’add a tag’,

‘onAddTag’:callback_function,

‘onRemoveTag’:callback_function,

‘onChange’ : callback_function,

‘delimiter’: [‘,’,’;’], // Or a string with a single delimiter. Ex: ‘;’

‘removeWithBackspace’ : true,

‘minChars’ : 0,

‘maxChars’ : 0, // if not provided there is no limit

‘placeholderColor’ : ‘#666666’

});

jsp中寫法也很簡單。

```jsp

<input type="text" class="form-control tags" placeholder="描述商品的關鍵字" name="keywords" value="${good.keywords}" />