The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
Tagger - A Multi Tag Input Field
Setup
Link the script in your document:
<script type="text/javascript" src="jquery.tagger.js"></script>Add the class "tagger" to a text input field that you want to be converted to a multiple input:
<input class="tagger" type="text" name="tags[]" />You can also explicitly add tags to a tagger element by calling the addTag() method:
<script type="text/javascript">
$(document).ready(function(){
// add to tagger element by index
$('.tagger').eq(0).addTag('photo, design, creative');
// add to a specific tagger element by Id
$('#places').addTag('mountain view');
$('#places').addTag('chico');
});
</script>
Features
- Extends the jQuery object for ".tagger" elements
- Turns an input field with class "tagger" into a multiple tag field
- Adds hidden input fields for each tag
- Specifically designed to work with existing forms
- Lightweight and adds no extra markup or styles to existing elements
- Adds only two new elements: a UL for the tag list and an Add button
- Add as many tagger elements as you like to a page. They will all play nice together
- Will prevent the form from submitting on pressing return in the tag field
- Parses multiple tags from comma separated input
- Strips bad characters, leading and trailing whitespace
- Has a public method to add tags with javascript
Notes
At the moment, this script works best with PHP because it can automatically convert multiple inputs with the same name into an array. The example above uses the tags[] name to auto populate an array on the server-side with the tags that were entered.
Tagger was designed for use with CakePHP. The best way to set this up for Cake is to set the input name to name="data[Tag][][name]". PHP will "automatically" put your tags into a numbered array, in exactly the data format used by Cake. This makes saving multiple tags at once a snap.
