jquery.tagsinput.js，不错的标签输入框

小鱼儿 2021-05-10 11:18 636阅读 0赞

### 一、效果 ###

![图片描述][20160815155117517]

### 二、组件下载 ###

[https://github.com/xoxco/jQuery-Tags-Input][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}" />

[20160815155117517]: /images/20210506/1876c6b0188e4a30b097e02f6cda9cf9.png
[https_github.com_xoxco_jQuery-Tags-Input]: https://github.com/xoxco/jQuery-Tags-Input