Bootstrap TagListBuilder

Tag Sorting
Add Tags
Configured Options:
  • TypeAhead: No
  • Enable Tag Sorting: Yes
  • Tag Case: capitalize
  • Normalize Stored Case: No
  • Value Format: json
Last event: Waiting 0 events No events fired yet.
No Tag Sorting
Add Tags
Configured Options:
  • TypeAhead: No
  • Enable Tag Sorting: No
  • Tag Case: Not Set
  • Normalize Stored Case: No
  • Value Format: json
  • Tag Class: bg-primary
Last event: Waiting 0 events No events fired yet.
Typeahead with Tag Sorting
Add Tags
Configured Options:
  • TypeAhead: Yes
  • Enable Tag Sorting: Yes
  • Tag Case: upper
  • Normalize Stored Case: No
  • Value Format: json
  • Tag Class: bg-info
  • Sort Hover Class: bg-danger
Last event: Waiting 0 events No events fired yet.
Typeahead with No Tag Sorting
Add Tags
Configured Options:
  • TypeAhead: Yes
  • Enable Tag Sorting: No
  • Tag Case: lower
  • Normalize Stored Case: No
  • Value Format: json
  • Tag Class: bg-success
Last event: Waiting 0 events No events fired yet.
JavaScript-loaded Values and Events

This field starts empty. Its initial ID/label items are added with tagBuilder('set', items) after initialization. The labels are displayed while the hidden field stores only IDs.

Values will be loaded by JavaScript
Configured Options:
  • TypeAhead: No
  • Enable Tag Sorting: Yes
  • Tag Case: Not Set
  • Normalize Stored Case: No
  • Value Format: json
  • Tag Class: bg-dark
  • Sort Hover Class: bg-warning
Last event: Waiting 0 events No events fired yet.
Server-rendered ID and Label Values

These tags are supplied as { value, label } structs through the CFML fieldValue argument. Submitted values contain only the IDs.

No items loaded
Configured Options:
  • TypeAhead: No
  • Enable Tag Sorting: Yes
  • Tag Case: Not Set
  • Normalize Stored Case: No
  • Value Format: json
  • Tag Class: bg-secondary
  • Sort Hover Class: bg-warning
Last event: Waiting 0 events No events fired yet.