jQuery Tag-This

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)

Generic avatar John Doe
Generic avatar Jane Doe
Generic avatar Dan Doe
Generic avatar Danielle Doe
Generic avatar Mike Doe
Generic avatar 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.

Issues

Tag-This will work in IE7+ and in all modern desktop browsers, as well as most versions of iOS and Android.

If this demo page doesn't work in your browser or you have problems with a supported browser, file an issue on GitHub and I'll look into it.

Installing via Bower

You can install Tag-This from Bower, too! Run this line from your terminal if you have Bower installed:

bower install jQuery-Tag-This

jQuery Tag-This is written and maintained by Dan Gribbin. Get in touch on twitter.

Fork me on GitHub