jQuery Tag This Plugin

Here's the simplest way to use Tag-This. Type some text and get a tag! clear all see code

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

This example takes email addresses, and displays an error state when an invalid or duplicate email address was entered. clear all see code

//set up Tag-This on our input (just call this once on page load)
$('#email-tags').tagThis({
    email : true,
    noDuplicates : true
});

Tag-This can use jQuery UI's Autocomplete functionality too! Try typing the first few letters of the name of a fruit and select an item from the list to create a tag. clear all see code

//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
});

Below is an example of creating tags programmatically. Click an 'Add' button below to add tags, then click 'see code' to see how it's done. clear all see code

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

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.

see code

[
  {
    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:

see code

$.ajax({
  type: "POST",
  url: '/some-endpoint',
  data : tags
});