taxonomy-jquery
Simple and mobile-friendly UI for tag assignment.
You can add new or select previously defined tags. This approach provides an alternative to the typeahead implementation by instead displaying all available tags to the user.
Demo
You can see it live here.
Features
- Displays all tags, active or inactive, for easy toggling (no typeahead)
- Automatic duplication avoidance
- Mobile-friendly
- Multiple tag containers
Setup
Install with Bower.
bower install taxonomy-jquery
Include jQuery and the library before the closing body tag.
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="bower_components/taxonomy-jquery/dist/taxonomy-jquery.min.js"></script>
Maybe add a little CSS.
<style> .tag-cloud li {margin:3px;padding:10px;font-size:1em;cursor: pointer;} .tag-active{background-color:red;} .tag-undo{color:#fff;margin-left:10px} .tag-undo:hover{color:#fff} </style>
Usage
List your tags inside a form element.
<form action="#"> <ul id="tag-cloud"> <li>First Tag</li> <li>Second Tag</li> <li>Third Tag</li> </ul> </form>
If you want a tag to be pre-selected, give it the tag-active
class.
... <li class="tag-active">Pre-selected Tag</li> ...
Then assign the plugin to your list.
<script> $('#my-tags').taxonomy_jquery(); </script>
Your list will be converted into a Bootstrap-friendly "tag cloud". Each tag will be clickable and the user will be able to add new tags. A "Create a tag" button is automatically prepended to the top of the list. Your list will now look like this.
<ul class="tag-cloud list-inline"> <li class="label label-default tag-create">+ Create a tag</li> <li class="label label-default tag tag-active" data-tag-slug="first%20tag">First Tag</li> <li class="label label-default tag tag-active" data-tag-slug="second%20tag">Second Tag</li> <li class="label label-default tag tag-active" data-tag-slug="third%20tag">Third Tag</li> <li class="tag-active label label-default tag" data-tag-slug="pre-selected%20tag">Pre-selected Tag</li> </ul>
Active tags that the user selects or adds will be appended to the form as part of the input array taxonomy-new-tags[]
. So, expanding on the example above, if all tags are clicked, the HTML will look something like this. Notice the hidden input fields.
<form action="#"> <ul class="tag-cloud list-inline"> ... </ul> <input type="text" name="taxonomy-new-tags[]" value="Pre-selected Tag"> <input type="text" name="taxonomy-new-tags[]" value="First Tag"> <input type="text" name="taxonomy-new-tags[]" value="Second Tag"> <input type="text" name="taxonomy-new-tags[]" value="Third Tag"> </form>
When you submit the form, you can get the selected tags by accessing taxonomy-new-tags
.
Options
You can override defaults by passing in a string literal on instantiation. Here is a list of default options followed by examples of the most used.
tagClass:'.tag', tagClasses:'label label-default', tagActiveClass:'.tag-active', tagCreateClass:'.tag-create', tagUndo:'.tag-undo', tagSlugData:'data-tag-slug', addInput:'#tag-cloud-input', hiddenFieldName:'taxonomy-new-tags[]', undoCharacter:'X', createButton:true, createButtonPositon:'first', createButtonLabel:'+ Create a tag'
hiddenFieldName
By default all selected tags will be appended to the form as taxonomy-new-tags[]
. You can override this with the hiddenFieldName
option. This is especially useful if you have two taxonomies under the same form. Please note the name needs to end in array brackets.
<script> $('#my-tags').taxonomy_jquery({hiddenFieldName:'my-tags[]'}); $('#my-other-tags).taxonomy_jquery({hiddenFieldName:'my-other-tags[]'}); </script>
createButton
If you want to hide the "Create a tag" button, make this option false. This is useful if you want to manage tag creation elsewhere.
If you want to put the "Create a tag" button at the end of the list, set createButtonPosition
to true
. To change the label on the "Create a tag" button, set createButtonLabel
to any string.
Example: (sets the "Create a tag" button after at the end of the list with "Other +" as the label)
<script> $('#my-tags').taxonomy_jquery({ createButtonPosition:'last', createButtonLabel:'Other +' }); </script>
CSS Elements
You can customize the following class elements in your CSS to make this library look more like your needs.
tag
Class assigned to each list item in the tag cloud.
tag-active
Class assigned to tags that are selected or added.
tag-create
Class assigned to the "Create a tag" button.
tag-undo
Class assigned to the anchor in the newly created tag. This is the link the user clicks to delete the tag.
Similar Plugins
- https://github.com/bastianallgeier/Tags
- https://github.com/PebbleRoad/taxonomy-browser/tree/gh-pages
- https://github.com/max-favilli/tagmanager
Roadmap
Version 0.0.3
- Bugfix: Focus back to button on input backspace
Version 0.2.0
- Add typeahead for new tags to alert user on duplicate
- Customize settings like "Create a tag" button language
- Define form target where input array should go
Version 0.3.0
- Switch between other common UI styles in settings. We could have
mobile-friendly
(current) ortype-ahead
, which would be similar to this, this, this, or this implementation.
Example initialization:
$('.my-list').taxonomy_jquery({ 'ui':'mobile-friendly', 'style':'bootstrap3' });
Version 1.0.0
- Apply these wonderful suggestions
- Maybe change
taxonomy-new-tags[]
toselected-tags[]
- Add a parent dropdown to organize tags. Maybe use the Adjacency List Model design pattern for hierarchical data (read below), although this could complicate tags too much.
- Improve code with a more standard plugin pattern? Helpful resources:
- http://jqueryboilerplate.com/
- https://github.com/jquery-boilerplate/jquery-boilerplate
- https://github.com/jquery-boilerplate/jquery-boilerplate/wiki/jQuery-boilerplate-and-demo
- http://learn.jquery.com/plugins/basic-plugin-creation/
- http://learn.jquery.com/plugins/
- http://www.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
Other topics
###Schema for Adjacency List Model design pattern
Taxonomy is a list constructed from individual Taxons. Every taxonomy has one special taxon, which serves as a root of the tree. All taxons can have many child taxons, you can define as many of them as you need.
A good examples of taxonomies are “Categories” and “Brands”. Below you can see an example tree. In the first branch, Categories and T-Shirts are taxons while Men and Women are taxonomies.
| Categories |-- T-Shirts | |-- Men | `-- Women |-- Stickers |-- Mugs `-- Books | Brands |-- SuperTees |-- Stickypicky |-- Mugland `-- Bookmania
This library may aim to use the Adjacency List Model design pattern for hierarchical data, which represents a tree structure through a column referring to its parent node.
This would be a recommended database structure:
CREATE TABLE `prefix_taxons` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(75) NOT NULL, `slug` varchar(75) NOT NULL, `parent` int(11) NOT NULL, `root` int(11) NOT NULL, `updated_at` timestamp NULL DEFAULT NULL, `created_at` timestamp NULL DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;