JQuery tags Input Plugin (Add/Remove tags plugin) detailed _jquery

You should know what you are doing with your name.

A jquery developed tagging feature enhancements plugin that can generate or delete tags, and also check for input repeat tags, and implement autocomplete with jquery AutoComplete plug-ins.

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

Screenshots:

(The following is a translation of the official online usage, English is not very good, have the ability to try to reader Internet cafes)

First, refer to the following two files

<script src= "Jquery.tagsinput.js" ></script> <link rel= "stylesheet" type= "Text/css"
Jquery.tagsinput.css "/>

In your table dropdowns create a input box containing the tags list, you can set the default or existing tags in value, separated by commas.

<input name= "tags" id= "tags" value= "Foo,bar,baz"/>

Then, simply call the Tagsinput () function to any one of the input tags and it will be treated as a tags list

$ (' #tags '). Tagsinput ();

If you want to use Jquery.autocomalete (AutoComplete), add a parameter with a AutoComplete URL in the function.

$ (' #tags '). Tagsinput ({
 autocomplete_url: ' Http://myserver.com/api/autocomplete '
});

If you use the Jquery.autocomplete plugin on the bassistance.de site, you can add additional parameters to strengthen the AutoComplete plug-in, as described below.

$ (' #tags '). Tagsinput ({ 
 autocomplete_url: ' Http://myserver.com/api/autocomplete ',
 autocomplete:{ Selectfirst:true,width: ' 100px ', Autofill:true}
});

PS: It should be noted that the demo is the default jquery UI AutoComplete, if you want to test jquery.autocomplete, to the head of the annotated reference file to remove the annotation, and the $ (' #tags '). Tagsinput ({ The address of Autocomplete_url is changed to the corresponding Jquery.autocomplete file. Specific look at the page has instructions.

You can also use the Addtag () and Removetag () functions to add and remove tags, such as the following:

$ (' #tags '). Addtag (' foo ');
$ (' #tags '). Removetag (' Bar ');

You can also use the Importags () method to guide a set of tag list, you need to note that this will be the value set in the default tag to replace

$ (' #tags '). Importtags (' Foo,bar,baz ');

So if the importtags () does not have a value, is to reset the label value in input (note that the quotation mark to keep, you can understand that it is to send a null value.) ）

$ (' #tags '). Importtags (');

You can use Tagexist () to determine whether a label exists:

if ($ (' #tags '). Tagexist (' foo ')}

If you want to add additional functionality or trigger other actions when adding or removing labels, you can specify a callback in both the Onaddtag and Onremovetag parameters. Both functions return a label value as an argument (original: Both functions should accept a single tag as the parameter.)

$ (' #tags_1 '). Tagsinput ({
 width: ' auto ',
 onaddtag:function (tag) {
  console.log (' added ' +tag)
 },
 Onremovetag:function (tag) {
  console.log (' Removed ' +tag}}
});

If you want to ban tagging, or if you want to provide other interactive ways to add labels, you can add a interactive parameter with a value of false, which disables the addition of tags, while other features and rendering are the same.

$ (' #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/remove a label, you can increase the onchange parameter and set the callback function

By default, if the mouse is behind a label, pressing the BACKSPACE key removes the label. If you want to disable this, set the Removewithbackspace argument to False.

Parameters:

$ (selector). Tagsinput ({
 ' autocomplete_url ': url_to_autocomplete_api,//automatically complete the file address of the plugin, demo has instructions
 ' AutoComplete ': {option:value, option:value},//Automatic completion of plug-in parameters, demo has instructions. (Provide a jquery.autocomplete: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/)
 ' height ': ' 100px ',//Set height
 ' width ': ' 300px ',//Set width
 ' interactive ': true,//whether to allow tagging, false to block
 ' defaulttext ': ' Add a Tag ',//default text
 ' Onaddtag ': callback_function,//Add tag callback function
 ' Onremovetag ': callback_function,//delete tag's callback function
 ' OnChange ': callback_function,//change a label when the callback function
 ' removewithbackspace ': true,//whether the BACKSPACE key is allowed to remove the front label, false to block
 ' Minchars ': 0,//The small most characters of each label
 ' maxchars ': 0//Maximum characters per label, if not set or 0, is infinitely large
 ' placeholdercolor ': ' #666666 '/ Set the color of the DefaultText
});

The above is the entire content of this article, I hope to give you a reference, but also hope that we support the cloud habitat community.