You can choose different themes: 


Basic usage with autocomplete

Attach tagin to input element. Tags are separated by space by default. Initial value from input will be converted to tags. To use autocomplete specify array of tags with availableTags option.

// HTML: <input type="text" id="tags1" value="C++ Ruby">

$('input#tags1').tagin({
    availableTags: ['C++', 'PHP', 'Python', 'Java', 'JavaScript', 'Ruby', 'bash']
    //, allowNewTags: false //  user can insert only tags from autocomplete
});

You can also use tagSource(term, callback) to specify function that returns data, for example for loading data from remote server with ajax.

$('input#tags1').tagin({
    tagSource: function(term, callback) {
        // example ajax call
        $.get('https://somesite.com?serch='+term, function(data) {
            // return data to the autocomplete component
            callback(data);
        });
    }
});

Programmatic interaction

You can use various methods to interact with widget.

Create new tag: $('#tags2').tagin('createTag', 'abc');
Remove tag: $('#tags2').tagin('removeTag', 'java');
Set tags: $('#tags2').tagin('tags', ['python', 'java']);
Get tags: alert($('#tags2').tagin('tags'));
Clear values: $('#tags2').tagin('clear');

Events

You can attach handlers to events using regular jQuery binding mechanism.
Available events are: change tag-removed tag-created focus blur keydown keyup keypress.

$('#tags3')
    .tagin({
        allowTextInput: true
    })
    .on('change tag-removed tag-created',
        function(event) {
            $('#example-log').append(event.type+' ')
    });

Tag transformation

If you want tags to include spaces, you can change delimiter for example to comma.
To transform tag set transformFunction option to name of the String method or regular function. 

$('#tags4').tagin({
    delimiter: ',',
    transformFunction: 'toUpperCase'
        // or for example: function(tag) {return '*'+tag+'*';}
});

Search query input with tags

This is the main reason why I creted this plugin because i couldn't find other plugin that would be able to do this.

Query:  

$('#tags5')
    .tagin({
        allowTextInput: true,
        delimiterCreateTag: false,
        allowedChars: /[-a-zA-Z0-9]/g,
        transformFunction: 'toLowerCase'
    })
    .on('change', function() {
        var tags, query;
        tags = $(this).tagin('tags');
        tags.unshift('');
        query = $(this).tagin('inputs').join(' ').replace(/\s+/g, ' ') + tags.join(' #');
        $('#tags7-output').text(query);
    })
    .tagin('tags', ['javascript', 'php']).tagin('inputs', ['OOP tutorial']);

Overflowing

$('#tags6')
    .tagin()
    .data('tagin').element.width(300);