Web tab Function Plug: jQuery tags input translation API

The name should know what to do with it.

This specification label, because in write a backstage, use this kind of scene, Vuejs again nothing is usable, so this kind of interactivity is very strong, still cannot leave jquery.

Regret useless react development, combined with ant inside plug-ins are there. Alas, it is useless to say much. Let's see.

Vuejs I wrote a lot of components myself, and then I'll open up GitHub.

Turn from: JQuery tags Input Plugin (Add/Remove Tag plugin)

A jquery-developed tagging feature strengthens plugins that can generate or delete tags, check for input repeat tags, and implement AutoComplete with the jquery AutoComplete plug-in.

Official website: http://xoxco.com/projects/code/tagsinput/(has been hung, do not know why)

：

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

First, refer to the following two files

<Scriptsrc= "Jquery.tagsinput.js"></Script><Linkrel= "stylesheet"type= "Text/css"href= "Jquery.tagsinput.css" />

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

<inputname= "tags"ID= "tags"value= "Foo,bar,baz" />

then, simply call any one of the input tags tagsinput () function, it will be treated as a tags list

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

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

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

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

 ' Http://myserver.com/api/autocomplete '  autocomplete: {selectfirst:  true , Width: ' 100px ', Autofill:true  }});

P S: Note that the default in the demo is the jquery UI autocomplete, if you want to test the jquery.autocomplete, remove the comment from the commented-out reference file and put $ (' #tags '). The Autocomplete_url address in Tagsinput ({}) is changed to the corresponding Jquery.autocomplete file. See details on the page.

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

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

You can also use the Importags () method to enter a set of tag lists, and it is important to note that this will replace the default tag set in value

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

So if Importtags () does not have a value, it is to reset the value of the tag in input ( Note that the quotation marks should be preserved, it can be understood to give it a null value.) )

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

can use Tagexist () determines whether a label exists:

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

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

 ' auto ' 
   
    , Onaddtag:  
    functi On  
     ' added ' +
     
      tag)}, Onremovetag: 
      
    function  
     ' Delete Except ' +tag '}});  
   

If you want to prohibit adding tags, or if you want to provide other interactive ways to add tags, you can add a interactive parameter with a value of false , which disables the addition of tags, while the other functions and rendering are the same as before.

$ (' #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 tag, you can increase the parameters of the onchange and set the callback function

By default, if the mouse is behind a label, pressing the BACKSPACE key will remove that tag. If you want to disable this, set the removewithbackspace parameter to False.

Parameters:

$ (selector). Tagsinput ({' Autocomplete_url ': Url_to_autocomplete_api,//automatically complete the file address of the plugin, the demo has instructions' AutoComplete ': {option:value, option:value},//automatically complete the parameters of the plugin, the demo has a description. (For a jquery.autocomplete: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/)' Height ': ' 100px ',//Set Height' Width ': ' 300px ',//Set Width' Interactive ':true,//whether to allow tags to be added, false to block' DefaultText ': ' Add a tag ',//Default Text' Onaddtag ': callback_function,//Add a callback function to the label' Onremovetag ': callback_function,//remove a label's callback function' OnChange ': callback_function,//callback function when changing a label' Removewithbackspace ':true,//whether to allow the backspace key to delete the preceding label, False to block' Minchars ': 0,//small maximum characters for each label' Maxchars ': 0//the maximum character of each label, if not set or 0, is infinitely large' Placeholdercolor ': ' #666666 '//set the color of the DefaultText});

Web front end into the Pit series: click on the title to enter

first:   web front end into the pit first: what is the Web front end? Is there a future?

Second article: Web front end into the pit second article: How to learn the Web front end? Dry information!

scan screen QR code or direct search, you can follow my front-end public number: Front end you don't make a fuss.

Web tab Function Plug: jQuery tags input translation API