一、效果
二、组件下载
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}" />