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}" />