@nasfald/tagify
v1.2.2
Published
Want to simply convert an input field into a tags element, in a easy customizable way, with good performance and smallest code footprint? You are in the right place my friend. This a fork from yairEO to take a joint parameter
Downloads
1
Readme
Tagify - lightweight input "tags" script
Want to simply convert an input field into a tags element, in a easy customizable way, with good performance and smallest code footprint? You are in the right place my friend.
Demo page
Selling points
- supports whitelist (with native suggestions dropdown as-you-type)
- supports blacklists
- JS file is under 150 very readiable lines of code
- JS weights less than ~5kb
- SCSS file is ~2kb of highly readable and flexible code
- No other inputs are used beside the original, and its value is kept in sync
- Can paste in multiple values ("tag 1, tag 2, tag 3")
- Automatically disallow duplicate tags (vis "settings" object)
- Tags can be created by commas or by pressing the "Enter" key
- Tags can be trimmed via
hellip
by givingmax-width
to thetag
element in yourCSS
- Easily customized
- Exposed custom events
building the project
Simply run gulp
in your terminal, from the project's path (Gulp should be installed first)
Basic usage
Lets say this is your markup, and you already have a value set on the input (which was pre-filled by data from the server):
<input name='tags' placeholder='write some tags' value='foo, bar,buzz'>
<textarea name='tags' placeholder='write some tags'>foo, bar,buzz</textarea>
what you need to do to convert that nice input into "tags" is simply select your input/textarea and run tagify()
:
// vanilla component
var input = document.querySelector('input[name=tags]'),
tagify = new Tagify( input );
// with settings passed
tagify = new Tagify( input, {
duplicates: true,
whitelist: ['foo', 'bar'],
callbacks: {
add : onAddTag // calls an imaginary "onAddTag" function when a tag is added
}
});
// listen to custom tags' events such as 'add' or 'remove'
tagify1.on('remove', ()=>{
console.log(e, e.detail);
});
jQuery plugin version (jQuery.tagify.js)
$('[name=tags]')
.tagify()
.on('add', function(e, tagName){
console.log('added', tagName)
});
Now markup be like:
<tags>
<tag>
<x></x>
<div><span title="css">css</span></div>
</tag>
<tag>
<x></x>
<div><span title="html">html</span></div>
</tag>
<tag>
<x></x>
<div><span title="javascript">javascript</span></div>
</tag>
<div>
<input list="tagsSuggestions3l9nbieyr" class="input placeholder">
<datalist id="tagsSuggestions3l9nbieyr">
<label> select from the list:
<select>
<option value=""></option>
<option>foo</option>
<option>bar</option>
</select>
</label>
</datalist><span>write some tags</span>
</div>
<input name="tags" placeholder="write some tags" value="foo, bar,buzz">
</tags>
Methods
Name | Info --------------- | -------------------------------------------------------------------------- destroy | if called, will revert the input back as it was before Tagify was applied removeAllTags | removes all tags and rests the original input tag's value property
Exposed events
Name | Info --------------- | -------------------------------------------------------------------------- add | A tag has been added remove | A tag has been removed duplicate | A tag has been added and found to be a duplicate of existing one maxTagsExceed | Number of tags exceeds the allowed quantity and the exceed tags were denied (removed) blacklisted | A tag which is in the blacklist has been added and denied (removed) notWhitelisted | A tag which is not in the whitelist has been added and denied (removed)
Settings
Name | Type | Default | Info ------------------- | ---------- | ----------- | -------------------------------------------------------------------------- delimiters | String | "," | [regex] split tags by any of these delimiters. Example: Space or Coma - ", " pattern | String | "" | Validate the input by REGEX pattern (can also be applied on the input itself as an attribute) duplicates | Boolean | false | (flag) should duplicate tags be allowed or not enforeWhitelist | Boolean | false | should ONLY use tags allowed in whitelist autocomplete | Boolean | true | show native suggeestions list, as you type whitelist | Array | [] | an array of tags which only they are allowed blacklist | Array | [] | an array of tags which aren't allowed callbacks | Object | {} | exposed callbacks object to be triggered on events: 'add' / 'remove' tags maxTags | Number | Infinity | max number of tags suggestionsMinChars | Number | 2 | minimum characters to input which shows the sugegstions list