[Js/jquery] Jquery tagsinput application in h5 mail client

Summary

Recently has been tossing the mail H5 application, in order to ensure that the pc,ios,android end can be used, so the use of H5 page embedded in the app's WebView.

Page

The UI is probably like this

Jquery tagsinput Download: http://xoxco.com/projects/code/tagsinput/

First introduce JS and CSS

Input box

<name= "tags " id= "tags"  value= "Wolfy,wolfy2"  />

The above input box has the default value, you can call the Tagsinput method directly, make it into tags

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

If you want to add auto-completion, you can add the following parameters

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

You can add and remove tags by addtag and Removetag methods

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

You can add more than one tag at a time by using the following method

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

Note: If the method is passed in empty, the input content is emptied.

You can tell if a tag already exists

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

If you wish to have additional actions after adding or deleting, the plugin also provides a callback function for adding and removing.

    $ ("#tags"). Tagsinput ({////    ' autocomplete_url ': Url_to_autocomplete_api,    ///    ' AutoComplete ': {option:value, option:value},    //    ' height ': ' 100px ',    //    ' width ': ' 300px ',    //    ' Interactive ': true,    //    ' DefaultText ': ' Add a tag ',    //    ' Onaddtag ': function (tag) {    //        Console.log (' added ', tag);    },    //    ' Onremovetag ': function (tag) {    //        console.log (' removed ', tag);    },    //    ' OnChange ': function (tag) {    //        console.log (' changed ', tag);    },    //    ' delimiter ': [', ', '; '],   //or a string with a single delimiter. Ex: '; '    ' Removewithbackspace ': true,    //    ' Minchars ': 0,    //    ' Maxchars ': 0,//if not provided there is no limit    //    ' Placeholdercolor ': ' #666666 '    //});

[Js/jquery] Jquery tagsinput application in h5 mail client