jQuery Tag This Plugin

//set up Tag-This on our input (just call this once on page load)

//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 : 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.
	autocompleteSource : fruitList
//set up Tag-This on our input (just call this once on page load)
    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


//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:

  type: "POST",
  url: '/some-endpoint',
  data : tags

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