A nice, intuitive tag input plugin for jQuery, which degrades gracefully, when Javascript is disabled and is applied to a simple text input – no fancy HTML required.
This plugin has been created for Zootool: http://zootool.com and the Kirby CMS: http://getkirby.com
http://getkirby.com/blog/panel-tags-field/demo
- full keyboard navigation
- autocompletion
- support for local json data or remote requests
- automatic duplication avoidance
Include jquery, the tag input script and the stylesheet
<link rel="stylesheet" href="/path/to/css/tags.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="/path/to/js/tags.js"></script>
Create the input
<input type="text" id="tags" name="tags" />
Initialize the plugin
<script>
$(function() {
$('#tags').tagbox({
url: '/path/to/your/tags/json'
})
});
</script>
Can be either the URL to a server side script, which provides a simple json encoded array of tags – coming from a DB for example. Or it can be a json encode local array, which is perfect if you don't have too many tags and it's ok to add them directly to the same page.
Convert all tags to lowercase.
Set this to true if you want to allow duplicate tags.
Define the separating character
Define the minimum allowed length of tags
Define the maximum allowed length of tags
Define the css selector for the main tag box element
Will be triggered when a new tag is added
Will be triggered when a tag has been removed
Will be triggered when a user tries to add a duplicate tag
Will be triggered when a user tries to add an invalid tag
Will be triggered when all tags have been loaded for autocompletion
You can simple add tags to the input field like this:
<input type="text" id="tags" name="tags" value="design, architecture, photography" />
…which will by automatically converted to proper tag elements on load.
I believe that the plugin can be written in a more modern jQuery-way. I never dived too deep into plugin development for jQuery. So if you want to give it a look and convert a few things here and there I'd be very happy :)
MIT License - http://www.opensource.org/licenses/mit-license.php