A simple-yet-powerful jQuery plugin that turns text into tags! Give it a try below, then visit the GitHub repository (or install via Bower) to download and see full documentation.
Examples:
//set up Tag-This on our input (just call this once on page load)
$('#simple-tags').tagThis()
//that's it! type in the input above to see it in action.
//set up Tag-This on our input (just call this once on page load)
$('#email-tags').tagThis({
email : true,
noDuplicates : true
});
//source to match user input against for autocomplete
var tags = ["apple","orange","pear","pomegranate","peach", "plum", "banana","lemon", "lime"];
//just set the source you need for autocomplete. jQuery UI handles the rest.
$('#fruit-tags').tagThis({
autocompleteSource : fruitList
});
//set up Tag-This on our input (just call this once on page load)
$('#user-tags').tagThis({
interactive: false,
noDuplicates: true
});
//set up our click handler on a button on our page
$('.add-button').on('click', function(){
//Tag-This lets you pass your own ID and/or text to be attached to a tag you want to create!
//Your code may look slightly different than this, but here's away to construct an object with an ID that Tag-This will accept.
var tagData = {
text : $(this).siblings('.name').text(),
id : $(this).parent().data('id')
}
//We have our object- let's pass it to Tag-This's 'addTag' method
$('#user-tags').addTag(tagData);
});
//Alternately, to just pass a string you can just call .addTag("some text") ... or pass a variable- .addTag(stringVariable)
John Doe
Jane Doe
Dan Doe
Danielle Doe
Mike Doe
Leah Doe
Accessing tags
You'll inevitably want to do something with those tags in the field once a user is finished entering them. In most cases, you'll probably want to send them to your server via an AJAX call. Luckily, Tag-This keeps an updated record of all of the tags in a given field via the 'tags' array!
The 'tags' array is an array of objects- each object contains the 'id' and 'text' of a tag.
To grab that array, just do this:
var tags = $('#my-input').data('tags');
Click 'see code' below to view an example of the 'tags' array that would be returned if you tagged all the users in the last example above.
[
{
id : 123,
text : "John Doe"
},
{
id : 1234,
text : "Jane Doe"
},
{
id : 12345,
text : "Dan Doe"
},
{
id : 123456,
text : "Danielle Doe"
},
{
id : 1234567,
text : "Mike Doe"
},
{
id : 12345678,
text : "Leah Doe"
}
]
Now that you have your array in the tags variable, you can easily send them to the server over AJAX. For example:
$.ajax({
type: "POST",
url: '/some-endpoint',
data : tags
});
Options
Below are the options you can pass to Tag-This to customize it to your preference. See the docs page for everything you need to know about Tag-This.
autocompleteSource : variable or URL - Use jQuery UI's Autocomplete functionality to suggest tags as a user types.
interactive : boolean - Allow the user to type to create tags.
John Doe
