Tag Editor Field using jQuery similar to StackOverflow

The tag editor featured on the StackOverflow website (and all the StackExchange websites) is a real slick tag editor that makes it much nicer to enter tags than just a plain textbox. I searched a little and couldn’t find anything that works just like theirs, so I decided to build one.

**Download Full Source Code: jquery.selectit-0.1.zip**

Here’s some example usage of the tag editor:

<div id='SelectBox' style='width: 350px'></div>

<input id='btnClear' type='button' value='Clear' />
<input id='btnGetTags' type='button' value='Get Tags' />
<input id='btnAdd' type='button' value='Add Tag' />

<script>
$(function () {
    // initialize tag editor and add a couple
    // pre-selected tags
    $('#SelectBox').selectit({

        // the name of hidden input elements created
        fieldname: 'tags', 

        // pre-selected tags
        values: [
            'javascript',
            'css',
            'jquery'
        ]
    });

    $('#btnGetTags').click(function () {
        // display entered tags to user
        alert($('#SelectBox').selectit('values').join(', '));
    });

    $('#btnClear').click(function () {
        // clear al tags from editor
        $('#SelectBox').selectit('clear');
    });
    $('#btnAdd').click(function () {
        // programatically add tag to editor
        var tag = prompt('Enter tag to add:', '');
        if (tag &amp;&amp; tag !== '') {
            $('#SelectBox').selectit('add', tag);
        }
    });
});
</script>