Form tag input
Turn a normal input into tags.
Usage
To apply this component, add data-f-tag-input
attribute to a div inside your form and then apply the f-tag-input
class to it. Inside this div you will need a hidden field that will be the one that gets posted to your server, a second input after this with a class of f-tag-input-main
and an unordered list with the class of f-tag-input-list
.
Example
Markup
<form method="post" action="" class="f-form f-form-horizontal">
<div class="f-form-row">
<label class="f-form-label">Tag manager</label>
<div class="f-form-controls">
<div class="f-tag-input" data-f-tag-input>
<input type="hidden" name="tags-input" value="hello,kitty">
<input type="text" class="f-tag-input-main" autocomplete="off"><span class="f-margin-left no-cursor">Press enter to add</span>
<ul class="f-tag-input-list"></ul>
</div>
</div>
</div>
</form>
Change split character and auto-split
You can change the character to split on, or whether to update the tags when this character is pressed (instead of enter) by passing options to your tag input element.
Example
Markup
<form method="post" action="" class="f-form f-form-horizontal">
<div class="f-form-row">
<label class="f-form-label">Tag manager</label>
<div class="f-form-controls">
<div class="f-tag-input" data-f-tag-input="{ splitCharacter : '|', enterOnSplitCharacter : true }">
<input type="hidden" name="tags-input" value="different|options">
<input type="text" class="f-tag-input-main" autocomplete="off"><span class="f-margin-left no-cursor">Press | to add</span>
<ul class="f-tag-input-list"></ul>
</div>
</div>
</div>
</form>
Add Tag Input Inside Dropdown
This option requires the dropdown component to function correctly. It will show a dropdown on hover of the 'select' and allow you to add tags to the 'select' by clicking options in the dropdown.
Example
JavaScript options
This is an example of how to set options via attribute:
<div data-f-tag-input="{splitCharacter:',', enterOnSplitCharacter:false}">...
Option | Possible value | Default | Description |
---|---|---|---|
splitCharacter |
any string | , | Character to perform the split between words on |
enterOnSplitCharacter |
boolean (true or false) | false | Whether to add a tag when the split character is pressed |
removeDuplicates |
boolean (true or false) | true | Checks the current list of tags for duplicates and doesn't add them |