1. Home
  2. Form Components
  3. Tag Inputs

Tag Inputs

Diffrent elements and styles of Tag Inputs.

Advanced CardButtons Extended

jQuery plugin providing a Twitter Bootstrap user interface for managing tags

Initialize

Initializing bootstrap tags input using jQuery.

                                    
                                      "Australia,India,USA"

Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.

                                    
                                      "Australia,India,USA"

Options

Array of keycodes which will add a tag when typing in the input. (default: [13, 188], which are ENTER and comma).

When set, no more than the given number of tags are allowed to add (default: undefined). When maxTags is reached, a class 'bootstrap-tagsinput-max' is placed on the tagsinput element.

Defines the maximum length of a single tag. (default: undefined).

When true, the same tag can be added multiple times. (default: false)

Advance Options

Use a <select multiple /> as your input element for a tags input, to gain true multivalue support. Instead of a comma separated string, the values will be set in an array. Existing <option /> elements will automatically be set as tags. This makes it also possible to create tags containing a comma.

Methods

Tagging JS

Simple Options

Australia, India, USA

By default case-sensitive is false. Set it to true to allow case sensitive.

Sydney, Beijing

By default close char is "×". Pass empty string close-char:"" To remove close char.

Cairo, Amsterdam, Washington

By default you can edit the tag you just deleted from the tag box. set it edit-on-delete:false to avoid that.

India, Brazil

By Default duplicate tags are not allowed, set no-duplicate:false to allow duplicates.

Amsterdam, Beijing

Enter key add a new tag by default, set it no-enter:true to avoid that.

Sydney, Washington

Comma "," key add a new tag by default, set it no-comma:true to avoid that.

Advance Options

Australia, India, USA

You can pass an array like ["," , ".", "_", "?"] of forbidden chars.

Sydney, Beijing

Following words as forbidden, "bastard","bitch","biatch","bloody".

Cairo / Amsterdam / Washington

Define your pre tag separator. In this example / is used as pre tag separator.

India, Brazil

If false, clicking away from the $type_zone won't add a new tag.

Amsterdam, Beijing

Define your tag char. In this example we have used * as tag char.

Sydney, Washington

Define your Class of the type-zone.

Simple Methods

Australia, India, USA
Sydney, Beijing, Cairo
Washington, Sydney, Beijing
Washington, Sydney, Beijing
Washington, Sydney, Beijing
Washington, Sydney, Beijing

Advance Methods

Washington, Sydney, Beijing
Washington, Sydney, Beijing
Washington, Sydney, Beijing

Check your console to see the special key objects.

Returns object
JavaScript
                                        
                                            Object {comma: 188, enter: 13, spacebar: 32, del: 46, backspace: 8}
Washington, Sydney, Beijing

Check your console to see the returned value.

Returned Value
JavaScript
                                        
                                            cairo