Chris Pietschmann

husband, father, hacker, entrepreneur, futurist, innovator, autodidact


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:

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

$(function () {
    // initialize tag editor and add a couple
    // pre-selected tags

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

        // pre-selected tags
        values: [

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

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

Use at your own risk. This code is quick and dirty, and may contain bugs. This is the reason I didn’t throw it up on Github or CodePlex.

Have fun!

blog comments powered by Disqus