Jquery tags input plugin (Add/delete tag INS)

Let's see why the name is used.

A tag enhancement plug-in developed by jquery that can generate or delete tags,You can also check duplicate input tags and use the jquery AutoComplete plug-in to implement automatic completion.

Official Website: http://xoxco.com/projects/code/tagsinput/

:

(The following is a translation of the usage on the official website. The English is not very good and you can view Internet cafes as much as possible)

First, reference the following two files

<ScriptSRC= "Jquery. tagsinput. js"> </Script><LinkREL= "Stylesheet"Type= "Text/CSS"Href= "Jquery.tagsinput.css" />
 

Create an input box containing the tags list in your form. You can set the default or existing tags in the value and separate them with commas.

<InputName= "Tags"ID= "Tags"Value= "Foo, bar, Baz" />
 

Then, simply call any input tagThe tagsinput () function is processed as a tags list.

 
$ ('# Tags'). tagsinput ();
 

If you want to use jquery. autocomalete (Automatic completion plug-in) together, add a parameter with AutoComplete URL in the function.

 
$ ('# Tags'). tagsinput ({autocomplete_url: 'http: // myserver.com/api/autocomplete '});
 

If you useBassistance.deThe jquery. AutoComplete plug-in can also add additional parameters to enhance the autocomplete plug-in, as described below.

 
$ ('# Tags'). Tagsinput ({autocomplete_url:'Http: // myserver.com/api/autocomplete', AutoComplete: {selectfirst:True, Width: '100px ', AutoFill:True}});
 

PS: In the demo, jquery UI AutoComplete is used by default. If you want to test jquery. autoComplete: remove the comments from the Referenced File whose header is commented out, and add $ ('# tags '). in tagsinput ({}), change the autocomplete_url address to the corresponding jquery. autoComplete file. For details, see the instructions on the page.

You can also useThe addtag () and removetag () function adds and deletes tags, as shown below:

 
$ ('# Tags'). addtag ('foo'); $ ('# Tags'). removetag ('bar ');
 

You can also import a group of tag lists using the importags () method. Note that the default tag set in the value will be replaced.

 
$ ('# Tags'). importtags ('foo, bar, Baz ');
 

So if importtags () does not contain a value, it is to reset the label value (Note that quotation marks should be retained. It can be understood as passing null values to them.)

 
$ ('# Tags'). importtags ('');
 

AvailableTagexist:

 
If($ ('# Tags'). tagexist ('foo ')){...}
 

If you want to add additional functions or trigger other actions when adding or removing tags, you can specify the callback function through the onaddtag and onremovetag parameters. Both functions return a tag value as a parameter (original:Both functions shocould accept a single tag as the parameter.)

 
$ ('# Tags_1'). Tagsinput ({width:'Auto', Onaddtag:Function(TAG) {console. Log ('Added '+Tag)}, onremovetag:Function(TAG) {console. Log ('Deleted '+Tag )}});
 

If you want to disable adding tags, or you want to provide other interactive methods to add tags, you can add a value of false.Interactive parameter. In this way, adding tags is disabled, and other functions and rendering are the same as the original.

$ ('# Tags_1'). Tagsinput ({width:'Auto', Onremovetag:Function(TAG) {console. Log ('Remover '+' "'+ tag + '"')}, Interactive:False});
 

If you want to call a function every time you add or delete a tag, you can add the onchange parameter and set the callback function.

By default, if the cursor is behind a tag, the tag is deleted by pressing the backspace key. If you want to disable this, SetThe removewithbackspace parameter is set to false.

Parameters:

 $ (Selector). tagsinput ({ 'Autocomplete _ url': url_to_autocomplete_api, //  The file address of the automatically completed plug-in, which is described in the demo. 'Autocomplete': {Option: value, option: Value }, //  Automatically complete the parameters of the plug-in, which is described in the demo. (Provide jquery. AutoComplete: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete) 'Height': '100px ', //  Set height 'Width': '300px ', //  Set width 'Interactive ': True , //  Whether tags can be added. False indicates blocking. 'Defaulttext': 'Add a tag ', //  Default text 'Onaddtag': callback_function,//  Callback Function for adding tags 'Onremovetag': callback_function, //  Callback Function for deleting tags 'Onchange': callback_function, //  Callback function when a tag is changed 'Removewithbackspace ': True , //  Whether to use the backspace key to delete the previous tag. False indicates blocking. 'Minchars': 0, //  Minimum character for each tag 'Maxchars': 0 //  The maximum character of each tag. If it is not set or 0, it is infinitely large. 'Placeholdercolor': '#666666' //  Set the defaulttext color });